如何更好的控制组件内单独部件的渲染？

Question

例如我有一个列表List，列表里有一行行的内容，每行的内容渲染的内容不一样，里面有一个button，
我点击button后，该行的内容发生了改变，button的样式也发生了改变，比如说变了颜色。

那么这个时候，如果我要改变内容，就要先把内容存入例如this.state.content，他还得是个数组或是对象，根据同理我可以把button 的样式也放入this.state.content中，这样可以按需更改相应的变化。

另一种方法就是把内容部分和button部分都分离出去，让他们自己处理自己的state。

那么是否有一种更合适的方式解决这个问题呢？

还有另一种情况就是如果我只处理button的变化，不管是用一个数组，或者单独分离出去，感觉都比较笨拙，是否有更简洁的方式呢？

Answer 1

用你的第二种方案，每一行是一个单独的组件，维护自己的state
还有，为什么会觉得笨拙呢？

Answer 2

在列表组件中保存数组数据，数据通过props传入行组件，行组件用传入的props初始化state，行组件自己维护这个状态。列表组件通过监听某些事件，如按钮点击事件，同步行组件的数据。