从其他组件初始化另一个反应组件

Question

我有很多td。单击每个 td，我想呈现一个全新的组件。我该怎么做？

Compon1 render 方法如下所示：

<tbody>
       {this.props.comments.map((comment, i) =>
            <tr>
               <td onClick={() => <Comp2 passOnData={comment}}><p>comment.text</p></td>
            </tr>
       )}
</tbody>

我希望当我单击每个 td 时应该呈现 Comp2，但那没有发生。

但是它也没有在控制台中抛出任何 error/warning。

由于我是 React 新手，所以我可能用错了方法；

Answer 1

你可以像这样使用states - Example

var Comment = React.createClass({
  render: function() {
    let comments = this.props.comment.child.map((comment, index) => {
      return <li key={index}>{comment}</li>;
    });

    return <ul>
      { comments }
    </ul>;
  }
});

var Comments = React.createClass({
  getInitialState: function() {
    return {
      comments: this.props.comments
    }
  },

  handleToggle: function (comment) {
    let comments = this.state.comments.map((el) => {
      el.isActive = (el.id === comment.id) ? !el.isActive : el.isActive
      return el;
    });

    this.setState({ comments: comments });
  },

  render: function() {
    let comments = this.state.comments.map((comment, i) => {
      return <tr key={i}>
        <td onClick={ this.handleToggle.bind(this, comment) }>
          <p>{ comment.text }</p>
          { comment.isActive ? <Comment comment={comment} /> : null }
        </td>
      </tr>;
     });

    return <table>
      <tbody>{ comments }</tbody>
    </table>;
  }
});

从其他组件初始化另一个反应组件

Initialize another react component from other component

javascript

reactjs

react-jsx