初始化来自其他组件的另一个反应组件

Question

我有很多td的。点击td的每一个我想渲染一个全新的组件。我会怎么做？

Compon1render方法是这样的：

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

我希望当我点击每个td的的Comp2应该呈现，但情况并非如此。

但是它不会在控制台中引发任何错误/警告。

由于我是新来的反应，我可能会以错误的方式做到这一点;

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