为多个组件动态响应更改状态

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