react—组件
使用组件我们可以更好的管理应用
怎么定义组件
1.使用函数定义组件
function HelloMessage(props) {
return <h1>Hello World!</h1>;
}
2.使用你也可以使用 ES6 class 来定义一个组件
class Welcome extends React.Component {
render() {
return <h1>Hello World!</h1>;
}
}
简单组件
1.直接引用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
function HelloMessage(props) {
return <h1>Hello World!</h1>;
}
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
</script>
</body>
</html>
2.简介引用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
function HelloMessage(props) {
return <h1>Hello World!</h1>;
}
const element = <HelloMessage />;
ReactDOM.render(
element,
document.getElementById('example')
);
</script>
</body>
</html>
进阶组件
1.带参数组件
function HelloMessage(props) {
return <h1>Hello {props.name}!</h1>;
}
const element = <HelloMessage name="Runoob"/>;
ReactDOM.render(
element,
document.getElementById('example')
);
2.复合组件
function Name(props) {
return <h1>网站名称:{props.name}</h1>;
}
function Url(props) {
return <h1>网站地址:{props.url}</h1>;
}
function Nickname(props) {
return <h1>网站小名:{props.nickname}</h1>;
}
function App() {
return (
<div>
<Name name="菜鸟教程" />
<Url url="http://www.runoob.com" />
<Nickname nickname="Runoob" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('example')
);
3.组件中包含自定义方法
// 定义组件
class Count extends React.Component {
constructor(){
super();
this.state={count:0};
}
update(){
this.setState({
count:++this.state.count
});
}
render(){
return (
<div>
<h1>Hello World!</h1>
<h3>{this.state.count}</h3>
</div>
);
}
}
// 声明组件
const element = <Count />;
// 声明全局变量
Count=ReactDOM.render(
element,
document.getElementById('example')
);
-END-