javascript - 动态响应多个组件的更改状态

Question

我对 React 组件有疑问。我有这个

class SidebarItem extends React.Component{
constructor(props) {
    super(props)
    this.state = { isActive: false }
}
handleClick() {
    var active = !this.state.isActive;
    this.setState({ isActive: active });
}
render() {
    var className = 'item';
    if(this.state.isActive){className = 'active item'} else {className = 'item'};
    return (
        <Link className={className} to={this.props.href} onClick={this.handleClick.bind(this)}>
            {this.props.label}
        </Link>
    );
}
}


export class Sidebar extends React.Component {
constructor(props) {
    super(props)
}
render() {
    var elements = this.props.defaults.elements.map(function (i) {
        return (
            <SidebarItem label={i.label} href={i.href} key={i.label} />
        );
    });
    return (
            <div className={this.props.defaults.class}>
                {elements}
            </div>
    );
}
};

我的目标是更改菜单事件元素的类名。我不明白，我必须如何翻译所有元素以清除事件状态并仅对一个单击的元素激活？

Answer 1

我想你正在寻找这样的东西

class Menu extends React.Component {
  constructor(){
    super()
    this.state = {
      items: ['Hello', 'world', 'it', 'is', 'me'],
      active: 0
    }
  }
  click(index){
    this.setState({active: index})
  }
  render(){
    const list = this.state.items.map((item,index) => {
      return <Item key={index} 
        className={this.state.active === index ? 'active' : ''} 
        text={item}
        click={this.click.bind(this, index)}
      />
    })
    return <ul>
        {list}
    </ul>
  }
}

class Item extends React.Component {
  render(){
    return <li onClick={this.props.click} 
             className={this.props.className}>
             {this.props.text}
           </li>        
  }
}


React.render(<Menu />, document.getElementById('container'));

希望对您有所帮助fiddle