首页 > react渲染tbody该怎么做?

react渲染tbody该怎么做?

我一开始想直接渲染table里的tbody,后来发现react不是给table添加一个tbody,而是把table的内容整个替换成了tbody,这导致了我写在html里的thead被替换了。
意识到这个后,我就想在html里thead后写个div,然后让react渲染这个div来插入tbody。
但是好像在html里不能在table里插div。
我该怎么做呢?如果我不想渲染整个table,只想渲染tbody的话?


class MyTbody extends Component{
    render(){
       return(
          <tbody>
             //…………$%*;#
          </tbody>
       )
    }
}

//另一方面render
return(
<table>
   <thead></thead>
   <MyTbody />
</table>
)

题主看看官方的例子吧 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'));
【热门文章】
【热门文章】