我一开始想直接渲染table里的tbody,后来发现react不是给table添加一个tbody,而是把table的内容整个替换成了tbody,这导致了我写在html里的thead被替换了。
意识到这个后,我就想在html里thead后写个div,然后让react渲染这个div来插入tbody。
但是好像在html里不能在table里插div。
我该怎么做呢?如果我不想渲染整个table,只想渲染tbody的话?
我一开始想直接渲染table里的tbody,后来发现react不是给table添加一个tbody,而是把table的内容整个替换成了tbody,这导致了我写在html里的thead被替换了。
意识到这个后,我就想在html里thead后写个div,然后让react渲染这个div来插入tbody。
但是好像在html里不能在table里插div。
我该怎么做呢?如果我不想渲染整个table,只想渲染tbody的话?
题主看看官方的例子吧 http://reactjs.cn/react/docs/tutorial.html
这个是我写的小demo
var App = React.createClass({
getInitialState: function () {
return {
data: [
{
num: '2015011',
name: 'Jacky',
age: 21
},
{
num: '2015012',
name: 'Mary',
age: 20
}
]
}
},
handleClick: function () {
this.setState({
data: [
{
num: '2015013',
name: 'Helen',
age: 20
},
{
num: '2015014',
name: 'Jay',
age: 21
}
]
});
},
render: function () {
return (
<div>
<table className="table">
<thead>
<tr>
<th>#</th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<UserList data={this.state.data}/>
</table>
<button onClick={this.handleClick}>换一批</button>
</div>
)
}
});
var UserList = React.createClass({
render: function () {
return (
<tbody>
{this.props.data.map(function (user, index) {
return <UserItem data={user} key={user.num} index={index}/>
})}
</tbody>
)
}
});
var UserItem = React.createClass({
render: function () {
index = this.props.index;
var user = this.props.data;
return (
<tr>
<td>{index + 1}</td>
<td>{user.num}</td>
<td>{user.name}</td>
<td>{user.age}</td>
</tr>
)
}
});
React.render(<App />, document.getElementById('example'));
5 回答8.4k 阅读
2 回答10.5k 阅读✓ 已解决
2 回答10.7k 阅读✓ 已解决
3 回答1.2k 阅读✓ 已解决
3 回答4.8k 阅读✓ 已解决
3 回答1.8k 阅读
2 回答2k 阅读✓ 已解决