reactjs -如何呈现呈现返回组件的组件？

Question

对于下面的示例，我有一个组件GetCurrentVisitor，它呈现Visitors。

但是，它只呈现<h1>标记，表为空。我怀疑我也需要使用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'))

Answer 1

在这种情况下，您应该使用.map而不是.forEach。

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

Example

Answer 2

您也可以使用.forEach，但以另一种方式使用http://jsfiddle.net/jwm6k66c/321/

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>
    );
}

对我来说，Array.prototype.map更容易使用与反应。这只是另一个例子。

谢谢