複数のコンポーネントの状態を動的に変更する

Question

React Componentに問題があります。私はこれを持っています

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を変更することです。私は理解できません。すべての要素をクリアなアクティブ状態に変換し、クリックされた要素に対してのみアクティブにする方法を教えてください。私はあなたがこの

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

のようなものを探していると思う

Answer 1

は、それはあなたがfiddle