初始化來自其他組件的另一個反應組件

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