目录
方法一：构造函数创建组件
- 使用构造函数来创建组件时，如果要接收外界传递的数据，需要在构造函数的参数列表中使用
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状态