reactjs-如何渲染返回组件的组件？

对于下面的示例，我有一个组件

GetCurrentVisitor

，它呈现

Visitors

但是，它只会呈现

标记，并且表是空的。我怀疑我还需要使用

ReactDOM

来渲染

Vistors

组件。但是怎么做呢

var VISITORS = [
        {
            first_name: 'Harry',
            last_name: 'Potter'
        },
        {
            first_name: 'Hermione',
            last_name: 'Granger'
        }
    ]

class GetCurrentVisitors extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visitors: VISITORS
        }
    }

    render () {
        return (
            <div>
                <h1>Current visitors</h1>
                <Visitors visitors={this.state.visitors} />
            </div>
        );
    }
}

class Visitors extends React.Component {
    constructor(props) {
        super(props);
    }
    render () {
        return (
            <table>
                {this.props.visitors.forEach(
                    function(visitor) {
                        <tr>
                            <td>
                            {console.log('from: ', visitor.first_name)}
                            {visitor.first_name}
                            </td>
                        </tr>
                    })}
            </table>
        );
    }
}

ReactDOM.render(
    <GetCurrentVisitors />, document.getElementById('getcurrentvisitors'))

var访问者=[
{
名字：“哈里”，
姓：“波特”
},
{
名字：“赫敏”，
姓：“格兰杰”
}
]
类GetCurrentVisitors.Component{
建造师（道具）{
超级（道具）；
此.state={
访客：访客
}
}
渲染（）{
返回(
当前访客
);
}
}
类。组件{
建造师（道具）{
超级（道具）；
}
渲染（）{
返回(
{this.props.visitors.forEach(
功能（访客）{
{console.log（'from:'，visitor.first_name）}
{访客名}
})}
);
}
}
ReactDOM.render(
，document.getElementById（'getcurrentvisitors'））

在这种情况下，您应该使用

{this.props.visitors.map（函数（访问者，索引）{
返回
{visitor.first_name}
})}

---

您也可以使用

.forEach

，但可以使用另一种方式

render（）{
让itemList=[]；
this.props.visitors.forEach（函数（visitor，index）{
itemList.push(
{访客名}
)
})
返回(
{itemList}
);
}

对于我来说，

Array.prototype.map

更易于与React一起使用。这只是另一个例子

谢谢

{this.props.visitors.map(function(visitor, index) {
  return <tr key={index}>
    <td>{ visitor.first_name } </td>
  </tr>
})}

render () {
  let itemList = [];
  this.props.visitors.forEach(function(visitor,index) {
    itemList.push(<tr key={index}><td>
        {visitor.first_name}
      </td></tr>
    )
  })
  return (
    <table>
      {itemList}
    </table>
    );
}