使用了state生命周期，居然写成功……
直接上代码：实例地址 http://www.zhuanbike.com/react/01.html 2秒state生命周期
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React开屏广告效果</title>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style tyle=text/css>
#root img {
width:100%;
}
#root{max-width:780px;margin:0 auto;}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const todoList = ["模块1", "模块2", "模块3", "模块4"];//模块加入可以替换成其他jsx
class Todo extends React.Component {
render() {
return <div>{this.props.content}</div>;
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
todoList: [<img src='./img/sk01.jpeg'></img>]
};
}
componentDidMount() {
this.timer = setTimeout(() => {
this.setState({
todoList: todoList
});
}, 2000);
}
componentWillUnmount() {
clearTimeout(this.timer);
}
render() {
return (
<div>
{this.state.todoList.map((todo, index) => (
<Todo content={todo} key={index} />
))}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
</script>
</body>
</html>
