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

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

我的目标是要改变的className菜单的活性元素。我无法理解，我必须如何翻译所有元素才能清除活动状态，并且只对一个单击的元素进行活动？

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 { 
    constructor(){ 
    super(); 
    } 
    render(){ 
    return <li onClick={this.props.click} 
      className={this.props.className}> 
      {this.props.text} 
      </li>   
    } 
} 


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

希望它会帮助你fiddle