在同一页面上重用组件，每个组件都有自己的状态答案

【问题标题】：Reuse component on same page each with its own state在同一页面上重用组件，每个组件都有自己的状态
【发布时间】：2018-03-13 17:55:46
【问题描述】：

我试图在一个父组件下多次重用同一个组件。所有的 SortLabels 都共享相同的状态。因此，当单击一个元素并反映上一次单击的状态时。如何使它们成为具有不同状态的独立组件？

class SortLabel extends Component {

constructor(props, context) {
    super(props, context);
    this.state = {
        order: 'asc',
    };

    this.toggle = this.toggle.bind(this);
}

toggle() {
    this.setState({order: this.state.order === 'asc' ? 'desc' : 'asc'});
}

render() {
    const {itemProperty, sortingProperty} = this.props;

    return (            
        <TableSortLabel
            key={`Sort ${itemProperty.get('id')}`}
            id={`Sort ${itemProperty.get('id')}`}
            active = {sortingProperty === itemProperty.get('id')}
            onClick = {this.toggle}
            direction={this.state.order}>
            {itemProperty.get('description')}
        </TableSortLabel>             
    )
 }
}

更新对此进行测试后，组件具有单独的状态。问题在于我处理状态的方式

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

它看起来就像您设置它的方式，您将相同的变量从父组件绑定到子组件（即 id）。所以您只需要以某种方式将其分开：id1、id2 等...为了更好地回答您的问题，我可能希望看到父组件

【讨论】：