React入门实践之Todo List
上次我们介绍了React入门的Hello World程序,还搭建了一个简单的React运行环境,今天就来写一个TodoList程序,逐步学习React开发。 |- TodoList |- TodoItem |- TodoItem 可以看到,TodoList相当于一个容器,里面可以放很多TodoItem组件,接下来,我们先来实现TodoList组件,让它简单地显示一行文字,JSX文件代码如下: // main.jsx
var React = require('react');
var ReactDOM = require('react-dom');
var TodoList = React.createClass({
render: function() {
return (
<div className="todoList">
Your todo list goes here.
</div>
);
}
});
ReactDOM.render(
<TodoList/>,document.getElementById('container')
);
上面的代码先使用React.createClass定义一个TodoList组件,然后在其render方法中定义HTML模板结构,可以看到,我们定义了一个 <body>
<div id="container"></div>
<script type="text/javascript" src="js/main.min.js"></script>
</body>
* { margin: 0; padding: 0; box-sizing: border-box; }
.todoList { width: 450px; padding: 10px; margin: 10px auto; background-color: wheat; }
当我们运行之后,页面就显示出一行文字,如图: var todo = {id: 0,name: "todo name",time: "8:00"};
我们希望创建 var TodoList = React.createClass({
render: function() {
return (
<div className="todoList">
<TodoItem id="0" name="sleep" time="23:00"/>
<TodoItem id="1" name="get up" time="8:00"/>
</div>
);
}
});
var TodoItem = React.createClass({
render: function() {
return (
<div className="todoItem">
<input type="checkbox" value={this.props.id}/>
<div className="name">{this.props.name}</div>
<div className="time">{this.props.time}</div>
</div>
);
}
});
可以看到,我们在TodoList中添加了两个TodoItem,并且传递了三个属性,这三个属性将 .todoItem { width: 400px; height: 40px; background-color: #eee; border-radius: 3px; display: flex; justify-content: center; margin: 10px auto 0; }
.todoItem:first-child { margin-top: 0; }
.todoItem * { width: 50px; line-height: 40px; text-align: center; }
.todoItem input { width: 30px; height: 100%; }
.todoItem .name { flex-grow: 1; text-align: left; }
现在再来看看渲染出来的画面吧: var mockData = [
{id: 1,name: "report the updates to Boss",time: "9:30"},{id: 2,name: "Stand-up meeting",time: "10:00"},{id: 3,name: "Draw up a plan for next step",time: "11:00"}
];
我们可以把mockData传递到TodoList中,然后再渲染出TodoItem,再修改一下代码: var TodoList = React.createClass({
render: function() {
//get the data in props,and transform,make them in the form of <TodoItem/>
var todoItems = this.props.data.map(function(todo) {
return (
//the 'key' property is required
<TodoItem key={todo.id} id={todo.id} name={todo.name} time={todo.time}/>
);
});
return (
//we use {todoItems} here instead of <TodoItem/>
<div className="todoList">{todoItems}</div>
);
}
});
var TodoItem = React.createClass({
render: function() {
return (
<div className="todoItem">
<input type="checkbox" value={this.props.id}/>
<div className="name">{this.props.name}</div>
<div className="time">{this.props.time}</div>
</div>
);
}
});
var mockData = [
{id: 1,name: "report the updates to Boss",time: "9:30"},{id: 2,name: "Stand-up meeting",time: "10:00"},{id: 3,name: "Draw up a plan for next step",time: "11:00"}
];
ReactDOM.render(
//adding a ‘data’ property referring to mockData
<TodoList data={mockData}/>,document.getElementById('container')
);
上面的代码中我们直接把mockData传递进TodoList组件,然后在TodoList的render方法中要用到map函数对数据进行处理,将其映射为多个TodoItem组件组成的集合。注意map函数中的组件一定要带有一个 // main.jsx
var React = require('react');
var ReactDOM = require('react-dom');
var TodoList = React.createClass({
getInitialState: function() {
//set the initial state with data
return {data: []};
},componentDidMount: function() {
console.log('in real dev we get data via:',this.props.url);
//simulate the process of obtaining data
var networkTime = 1000;
var mockData = [
{id: 1,time: "11:00"}
];
setTimeout(function() {
//set state to re-render the view
this.setState({data: mockData});
}.bind(this),networkTime);
},render: function() {
//remember to use 'this.state.data' rather than 'this.props.data'
var todoItems = this.state.data.map(function(todo) {
return (
<TodoItem key={todo.id} id={todo.id} name={todo.name} time={todo.time}/>
);
});
return (
<div className="todoList">{todoItems}</div>
);
}
});
var TodoItem = React.createClass({
render: function() {
return (
<div className="todoItem">
<input type="checkbox" value={this.props.id}/>
<div className="name">{this.props.name}</div>
<div className="time">{this.props.time}</div>
</div>
);
}
});
var url = 'http://localhost:8080/todos';
ReactDOM.render(
//replace the 'data' with 'url'
<TodoList url={url}/>,document.getElementById('container')
);
这一次我们给TodoList提供了一个url用于通过网络获取真正的数据,在TodoList里面,需要给它一个初始值,这是通过声明 参考:http://facebook.github.io/react/docs/tutorial.html (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |