目录
方法一:构造函数创建组件
- 使用构造函数来创建组件时,如果要接收外界传递的数据,需要在构造函数的参数列表中使用
props
来接收;- 必须要向外return一个合法的JSX创建的虚拟DOM;
-
实例:创建一个简单组件
function Hello() {
return <h1>Hello World</h1>
}
ReactDOM.render(
<Hello/>,
document.getElementById("example")
);
-
实例:向组件传递数据
function Hello(props) {
return <h3>My name is {props.name}, my age is {props.age} and my gender is {props.gender}</h3>;
};
const myName = <Hello name="张三" age="18" gender="你猜"/>;
ReactDOM.render(
myName,
document.getElementById("example")
);
-
实例:复合组件
我们可以把一个复杂组件的不同功能分离开来,分别定义成不同的组件,然后用多个组件再合成一个复合组件,这样就可以提高组件的复用率,有点类似于Java中的策略模式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
function Name(props){
return <h3>my name is {props.name}</h3>;
};
function Age(props){
return <h3>my age is {props.age}</h3>;
};
function Gender(props){
return <h3>my gender is {props.gender}</h3>;
};
function Person(){
return (
<div>
<Name name="碧瑶" />
<Age age="18" />
<Gender gender="姑娘" />
</div>
);
}
ReactDOM.render(
<Person />,
document.getElementById("example")
);
</script>
</body>
</html>
运行结果
方法二:class关键字创建组件
-
实例:向组件传递数据
class Person extends React.Component {
render() {
return <h3>My name is {this.props.name}, my age is {this.props.age} and my gender is {this.props.gender}</h3>;
}
}
ReactDOM.render(
<Person name="田七" age="30" gender="男" />,
document.getElementById("example")
);
构造函数创建出的组件叫作:无状态组件;class关键字创建爱你的组件叫作:有状态组件;有状态组件与无状态组件的本质区别在于是否有state(状态)属性,接下来一篇博文将详细介绍组件的State状态