ReactJS-在组件之间传递状态更改

我有以下组件：

render(){
  return(

    {/* whenClicked is a dropdown property  /*}
    <button onClick={this.props.whenClicked} type="button">
    .....
    </button>
    )

constructor(props) {
    super(props);
    this.state = {
        open:false
    }
}
render(){
    return(

         {/* toggle between show and hide  /*}
        <ul className={"dropdown-menu " + (this.state.open ? 'show' : '')}>
            {this.props.dropItems.map(function(item){
               ......
            })}
        </ul>
    )
}

   'use strict'; 
   var React = require('react'),
       Button = require('./button'),
       UnorderedList = require('./unordered-list');

   class Dropdown extends React.Component{

   constructor(props) {
      super(props);
      this.state = {
          open:false
      }

     // added this as an update to my question per ssorallen
        this.handleClick = this.handleClick.bind(this)
   }

   handleClick(){
      this.setState({open : !this.state.open});
   }

  render(){

      return(
          <div className="dropdown">
              {/* whenClicked is a property not an event, per se. */}
              <Button whenClicked={this.handleClick}  />
              ......
             {/* // prop.items comes from app.jsx  */}
              <UnorderedList dropItems={this.props.items} />
          </div>
      )
  } }

   module.exports = Dropdown;

 ....
       var selectItems = {
           title : "Choose a Fruit",
           items : [
               "Cantaloupe",
                .........
        ]
    }

    <Dropdown items={selectItems.items} multiSelect={true} title={selectItems.title} />
....

 'use strict';
 var React = require('react');

 class UnorderedList extends React.Component{

     constructor(props) {
         super(props);
     }
     render(){
         var listItemStyle = {
             cursor:'pointer'
         };

    return(
        <ul className={"dropdown-menu " + (this.props.toggleState ? 'show' : '')} role='menu' aria-labelledby='dropdownMenu1'>
            {this.props.dropItems.map(function(item){
                return (<li style={listItemStyle} key={item}><a>{item}</a></li>)
            })}
        </ul>
    )
} }

  module.exports = UnorderedList;

  'use strict';
  var React = require('react'),
      Button = require('./button'),
      UnorderedList = require('./unordered-list');

  class Dropdown extends React.Component{

      constructor(props) {
          super(props);
          this.state = {
              open:false
          }
          this.handleClick = this.handleClick.bind(this)
      }

handleClick(){
    this.setState({open : !this.state.open});
}

render(){
    return(
        <div className="dropdown">
            {/* whenClicked is a property not an event, per se. */}
            <Button whenClicked={this.handleClick} className="btn-warning" title={this.props.title} subTitleClassName="caret"></Button>
            <UnorderedList dropItems={this.props.items} toggleState={this.state.open} />
        </div>
    )
  }
 }
   module.exports = Dropdown;

由于我的按钮组件是通用的，它的事件也是通用的，我的无序列表也是如此；设置事件的是下拉列表。以下是两者的相关代码：

按钮组件：

render(){
  return(

    {/* whenClicked is a dropdown property  /*}
    <button onClick={this.props.whenClicked} type="button">
    .....
    </button>
    )

constructor(props) {
    super(props);
    this.state = {
        open:false
    }
}
render(){
    return(

         {/* toggle between show and hide  /*}
        <ul className={"dropdown-menu " + (this.state.open ? 'show' : '')}>
            {this.props.dropItems.map(function(item){
               ......
            })}
        </ul>
    )
}

   'use strict'; 
   var React = require('react'),
       Button = require('./button'),
       UnorderedList = require('./unordered-list');

   class Dropdown extends React.Component{

   constructor(props) {
      super(props);
      this.state = {
          open:false
      }

     // added this as an update to my question per ssorallen
        this.handleClick = this.handleClick.bind(this)
   }

   handleClick(){
      this.setState({open : !this.state.open});
   }

  render(){

      return(
          <div className="dropdown">
              {/* whenClicked is a property not an event, per se. */}
              <Button whenClicked={this.handleClick}  />
              ......
             {/* // prop.items comes from app.jsx  */}
              <UnorderedList dropItems={this.props.items} />
          </div>
      )
  } }

   module.exports = Dropdown;

 ....
       var selectItems = {
           title : "Choose a Fruit",
           items : [
               "Cantaloupe",
                .........
        ]
    }

    <Dropdown items={selectItems.items} multiSelect={true} title={selectItems.title} />
....

 'use strict';
 var React = require('react');

 class UnorderedList extends React.Component{

     constructor(props) {
         super(props);
     }
     render(){
         var listItemStyle = {
             cursor:'pointer'
         };

    return(
        <ul className={"dropdown-menu " + (this.props.toggleState ? 'show' : '')} role='menu' aria-labelledby='dropdownMenu1'>
            {this.props.dropItems.map(function(item){
                return (<li style={listItemStyle} key={item}><a>{item}</a></li>)
            })}
        </ul>
    )
} }

  module.exports = UnorderedList;

  'use strict';
  var React = require('react'),
      Button = require('./button'),
      UnorderedList = require('./unordered-list');

  class Dropdown extends React.Component{

      constructor(props) {
          super(props);
          this.state = {
              open:false
          }
          this.handleClick = this.handleClick.bind(this)
      }

handleClick(){
    this.setState({open : !this.state.open});
}

render(){
    return(
        <div className="dropdown">
            {/* whenClicked is a property not an event, per se. */}
            <Button whenClicked={this.handleClick} className="btn-warning" title={this.props.title} subTitleClassName="caret"></Button>
            <UnorderedList dropItems={this.props.items} toggleState={this.state.open} />
        </div>
    )
  }
 }
   module.exports = Dropdown;

所有这些都有效

我的问题：

render(){
  return(

    {/* whenClicked is a dropdown property  /*}
    <button onClick={this.props.whenClicked} type="button">
    .....
    </button>
    )

constructor(props) {
    super(props);
    this.state = {
        open:false
    }
}
render(){
    return(

         {/* toggle between show and hide  /*}
        <ul className={"dropdown-menu " + (this.state.open ? 'show' : '')}>
            {this.props.dropItems.map(function(item){
               ......
            })}
        </ul>
    )
}

   'use strict'; 
   var React = require('react'),
       Button = require('./button'),
       UnorderedList = require('./unordered-list');

   class Dropdown extends React.Component{

   constructor(props) {
      super(props);
      this.state = {
          open:false
      }

     // added this as an update to my question per ssorallen
        this.handleClick = this.handleClick.bind(this)
   }

   handleClick(){
      this.setState({open : !this.state.open});
   }

  render(){

      return(
          <div className="dropdown">
              {/* whenClicked is a property not an event, per se. */}
              <Button whenClicked={this.handleClick}  />
              ......
             {/* // prop.items comes from app.jsx  */}
              <UnorderedList dropItems={this.props.items} />
          </div>
      )
  } }

   module.exports = Dropdown;

 ....
       var selectItems = {
           title : "Choose a Fruit",
           items : [
               "Cantaloupe",
                .........
        ]
    }

    <Dropdown items={selectItems.items} multiSelect={true} title={selectItems.title} />
....

 'use strict';
 var React = require('react');

 class UnorderedList extends React.Component{

     constructor(props) {
         super(props);
     }
     render(){
         var listItemStyle = {
             cursor:'pointer'
         };

    return(
        <ul className={"dropdown-menu " + (this.props.toggleState ? 'show' : '')} role='menu' aria-labelledby='dropdownMenu1'>
            {this.props.dropItems.map(function(item){
                return (<li style={listItemStyle} key={item}><a>{item}</a></li>)
            })}
        </ul>
    )
} }

  module.exports = UnorderedList;

  'use strict';
  var React = require('react'),
      Button = require('./button'),
      UnorderedList = require('./unordered-list');

  class Dropdown extends React.Component{

      constructor(props) {
          super(props);
          this.state = {
              open:false
          }
          this.handleClick = this.handleClick.bind(this)
      }

handleClick(){
    this.setState({open : !this.state.open});
}

render(){
    return(
        <div className="dropdown">
            {/* whenClicked is a property not an event, per se. */}
            <Button whenClicked={this.handleClick} className="btn-warning" title={this.props.title} subTitleClassName="caret"></Button>
            <UnorderedList dropItems={this.props.items} toggleState={this.state.open} />
        </div>
    )
  }
 }
   module.exports = Dropdown;

单击按钮时，下拉列表的whenClicked事件将触发并切换打开状态

假设该事件触发无序列表，使其打开状态在true和false之间切换，从而从其类“下拉菜单”中添加/删除show

当state.open被更改时，有人能告诉我如何让下拉组件与无序列表通信吗

我得到的错误是：

---

未捕获类型错误：在扩展

React.Component

时，无法读取未定义的属性“setState”，使用ES6类，成员方法不再像向

React.createClass

传递对象时那样“自动绑定”。您可以通过以下方式获得习惯的行为：

类下拉列表扩展了React.Component{
构造函数（）{
...
this.handleClick=this.handleClick.bind（this）；
}
render（）{
...
...
}
}

使用ES6类扩展

React.Component

时，成员方法不再像向

React.createClass传递对象时那样“自动绑定”。您可以通过以下方式获得习惯的行为：

类下拉列表扩展了React.Component{
构造函数（）{
...
this.handleClick=this.handleClick.bind（this）；
}
render（）{
...
...
}
}
解决方案：

render(){
  return(

    {/* whenClicked is a dropdown property  /*}
    <button onClick={this.props.whenClicked} type="button">
    .....
    </button>
    )

constructor(props) {
    super(props);
    this.state = {
        open:false
    }
}
render(){
    return(

         {/* toggle between show and hide  /*}
        <ul className={"dropdown-menu " + (this.state.open ? 'show' : '')}>
            {this.props.dropItems.map(function(item){
               ......
            })}
        </ul>
    )
}

   'use strict'; 
   var React = require('react'),
       Button = require('./button'),
       UnorderedList = require('./unordered-list');

   class Dropdown extends React.Component{

   constructor(props) {
      super(props);
      this.state = {
          open:false
      }

     // added this as an update to my question per ssorallen
        this.handleClick = this.handleClick.bind(this)
   }

   handleClick(){
      this.setState({open : !this.state.open});
   }

  render(){

      return(
          <div className="dropdown">
              {/* whenClicked is a property not an event, per se. */}
              <Button whenClicked={this.handleClick}  />
              ......
             {/* // prop.items comes from app.jsx  */}
              <UnorderedList dropItems={this.props.items} />
          </div>
      )
  } }

   module.exports = Dropdown;

 ....
       var selectItems = {
           title : "Choose a Fruit",
           items : [
               "Cantaloupe",
                .........
        ]
    }

    <Dropdown items={selectItems.items} multiSelect={true} title={selectItems.title} />
....

 'use strict';
 var React = require('react');

 class UnorderedList extends React.Component{

     constructor(props) {
         super(props);
     }
     render(){
         var listItemStyle = {
             cursor:'pointer'
         };

    return(
        <ul className={"dropdown-menu " + (this.props.toggleState ? 'show' : '')} role='menu' aria-labelledby='dropdownMenu1'>
            {this.props.dropItems.map(function(item){
                return (<li style={listItemStyle} key={item}><a>{item}</a></li>)
            })}
        </ul>
    )
} }

  module.exports = UnorderedList;

  'use strict';
  var React = require('react'),
      Button = require('./button'),
      UnorderedList = require('./unordered-list');

  class Dropdown extends React.Component{

      constructor(props) {
          super(props);
          this.state = {
              open:false
          }
          this.handleClick = this.handleClick.bind(this)
      }

handleClick(){
    this.setState({open : !this.state.open});
}

render(){
    return(
        <div className="dropdown">
            {/* whenClicked is a property not an event, per se. */}
            <Button whenClicked={this.handleClick} className="btn-warning" title={this.props.title} subTitleClassName="caret"></Button>
            <UnorderedList dropItems={this.props.items} toggleState={this.state.open} />
        </div>
    )
  }
 }
   module.exports = Dropdown;

已从无序列表类中完全删除状态
在下拉列表中为无序列表创建带状态值的toggleState属性
将该属性传递给无序列表的“下拉菜单”类
无序列表类：

render(){
  return(

    {/* whenClicked is a dropdown property  /*}
    <button onClick={this.props.whenClicked} type="button">
    .....
    </button>
    )

constructor(props) {
    super(props);
    this.state = {
        open:false
    }
}
render(){
    return(

         {/* toggle between show and hide  /*}
        <ul className={"dropdown-menu " + (this.state.open ? 'show' : '')}>
            {this.props.dropItems.map(function(item){
               ......
            })}
        </ul>
    )
}

   'use strict'; 
   var React = require('react'),
       Button = require('./button'),
       UnorderedList = require('./unordered-list');

   class Dropdown extends React.Component{

   constructor(props) {
      super(props);
      this.state = {
          open:false
      }

     // added this as an update to my question per ssorallen
        this.handleClick = this.handleClick.bind(this)
   }

   handleClick(){
      this.setState({open : !this.state.open});
   }

  render(){

      return(
          <div className="dropdown">
              {/* whenClicked is a property not an event, per se. */}
              <Button whenClicked={this.handleClick}  />
              ......
             {/* // prop.items comes from app.jsx  */}
              <UnorderedList dropItems={this.props.items} />
          </div>
      )
  } }

   module.exports = Dropdown;

 ....
       var selectItems = {
           title : "Choose a Fruit",
           items : [
               "Cantaloupe",
                .........
        ]
    }

    <Dropdown items={selectItems.items} multiSelect={true} title={selectItems.title} />
....

 'use strict';
 var React = require('react');

 class UnorderedList extends React.Component{

     constructor(props) {
         super(props);
     }
     render(){
         var listItemStyle = {
             cursor:'pointer'
         };

    return(
        <ul className={"dropdown-menu " + (this.props.toggleState ? 'show' : '')} role='menu' aria-labelledby='dropdownMenu1'>
            {this.props.dropItems.map(function(item){
                return (<li style={listItemStyle} key={item}><a>{item}</a></li>)
            })}
        </ul>
    )
} }

  module.exports = UnorderedList;

  'use strict';
  var React = require('react'),
      Button = require('./button'),
      UnorderedList = require('./unordered-list');

  class Dropdown extends React.Component{

      constructor(props) {
          super(props);
          this.state = {
              open:false
          }
          this.handleClick = this.handleClick.bind(this)
      }

handleClick(){
    this.setState({open : !this.state.open});
}

render(){
    return(
        <div className="dropdown">
            {/* whenClicked is a property not an event, per se. */}
            <Button whenClicked={this.handleClick} className="btn-warning" title={this.props.title} subTitleClassName="caret"></Button>
            <UnorderedList dropItems={this.props.items} toggleState={this.state.open} />
        </div>
    )
  }
 }
   module.exports = Dropdown;

“严格使用”；
var React=要求（'React'）；
类无序列表扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
变量listItemStyle={
光标：'指针'
};
返回(

{this.props.dropItems.map（函数（项））{
返回（
{item}
）
})}

)
} }
module.exports=无序列表；

下拉类：

render(){
  return(

    {/* whenClicked is a dropdown property  /*}
    <button onClick={this.props.whenClicked} type="button">
    .....
    </button>
    )

constructor(props) {
    super(props);
    this.state = {
        open:false
    }
}
render(){
    return(

         {/* toggle between show and hide  /*}
        <ul className={"dropdown-menu " + (this.state.open ? 'show' : '')}>
            {this.props.dropItems.map(function(item){
               ......
            })}
        </ul>
    )
}

   'use strict'; 
   var React = require('react'),
       Button = require('./button'),
       UnorderedList = require('./unordered-list');

   class Dropdown extends React.Component{

   constructor(props) {
      super(props);
      this.state = {
          open:false
      }

     // added this as an update to my question per ssorallen
        this.handleClick = this.handleClick.bind(this)
   }

   handleClick(){
      this.setState({open : !this.state.open});
   }

  render(){

      return(
          <div className="dropdown">
              {/* whenClicked is a property not an event, per se. */}
              <Button whenClicked={this.handleClick}  />
              ......
             {/* // prop.items comes from app.jsx  */}
              <UnorderedList dropItems={this.props.items} />
          </div>
      )
  } }

   module.exports = Dropdown;

 ....
       var selectItems = {
           title : "Choose a Fruit",
           items : [
               "Cantaloupe",
                .........
        ]
    }

    <Dropdown items={selectItems.items} multiSelect={true} title={selectItems.title} />
....

 'use strict';
 var React = require('react');

 class UnorderedList extends React.Component{

     constructor(props) {
         super(props);
     }
     render(){
         var listItemStyle = {
             cursor:'pointer'
         };

    return(
        <ul className={"dropdown-menu " + (this.props.toggleState ? 'show' : '')} role='menu' aria-labelledby='dropdownMenu1'>
            {this.props.dropItems.map(function(item){
                return (<li style={listItemStyle} key={item}><a>{item}</a></li>)
            })}
        </ul>
    )
} }

  module.exports = UnorderedList;

  'use strict';
  var React = require('react'),
      Button = require('./button'),
      UnorderedList = require('./unordered-list');

  class Dropdown extends React.Component{

      constructor(props) {
          super(props);
          this.state = {
              open:false
          }
          this.handleClick = this.handleClick.bind(this)
      }

handleClick(){
    this.setState({open : !this.state.open});
}

render(){
    return(
        <div className="dropdown">
            {/* whenClicked is a property not an event, per se. */}
            <Button whenClicked={this.handleClick} className="btn-warning" title={this.props.title} subTitleClassName="caret"></Button>
            <UnorderedList dropItems={this.props.items} toggleState={this.state.open} />
        </div>
    )
  }
 }
   module.exports = Dropdown;

“严格使用”；
var React=require（'React'），
按钮=需要（“./按钮”），
无序列表=需要（'./无序列表'）；
类下拉列表扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
开放：假
}
this.handleClick=this.handleClick.bind（this）
}
handleClick（）{
this.setState（{open:！this.state.open}）；
}
render（）{
返回(
{/*whenClicked本身是属性而不是事件。*/}
)
}
}
module.exports=下拉列表；
解决方案：

render(){
  return(

    {/* whenClicked is a dropdown property  /*}
    <button onClick={this.props.whenClicked} type="button">
    .....
    </button>
    )

constructor(props) {
    super(props);
    this.state = {
        open:false
    }
}
render(){
    return(

         {/* toggle between show and hide  /*}
        <ul className={"dropdown-menu " + (this.state.open ? 'show' : '')}>
            {this.props.dropItems.map(function(item){
               ......
            })}
        </ul>
    )
}

   'use strict'; 
   var React = require('react'),
       Button = require('./button'),
       UnorderedList = require('./unordered-list');

   class Dropdown extends React.Component{

   constructor(props) {
      super(props);
      this.state = {
          open:false
      }

     // added this as an update to my question per ssorallen
        this.handleClick = this.handleClick.bind(this)
   }

   handleClick(){
      this.setState({open : !this.state.open});
   }

  render(){

      return(
          <div className="dropdown">
              {/* whenClicked is a property not an event, per se. */}
              <Button whenClicked={this.handleClick}  />
              ......
             {/* // prop.items comes from app.jsx  */}
              <UnorderedList dropItems={this.props.items} />
          </div>
      )
  } }

   module.exports = Dropdown;

 ....
       var selectItems = {
           title : "Choose a Fruit",
           items : [
               "Cantaloupe",
                .........
        ]
    }

    <Dropdown items={selectItems.items} multiSelect={true} title={selectItems.title} />
....

 'use strict';
 var React = require('react');

 class UnorderedList extends React.Component{

     constructor(props) {
         super(props);
     }
     render(){
         var listItemStyle = {
             cursor:'pointer'
         };

    return(
        <ul className={"dropdown-menu " + (this.props.toggleState ? 'show' : '')} role='menu' aria-labelledby='dropdownMenu1'>
            {this.props.dropItems.map(function(item){
                return (<li style={listItemStyle} key={item}><a>{item}</a></li>)
            })}
        </ul>
    )
} }

  module.exports = UnorderedList;

  'use strict';
  var React = require('react'),
      Button = require('./button'),
      UnorderedList = require('./unordered-list');

  class Dropdown extends React.Component{

      constructor(props) {
          super(props);
          this.state = {
              open:false
          }
          this.handleClick = this.handleClick.bind(this)
      }

handleClick(){
    this.setState({open : !this.state.open});
}

render(){
    return(
        <div className="dropdown">
            {/* whenClicked is a property not an event, per se. */}
            <Button whenClicked={this.handleClick} className="btn-warning" title={this.props.title} subTitleClassName="caret"></Button>
            <UnorderedList dropItems={this.props.items} toggleState={this.state.open} />
        </div>
    )
  }
 }
   module.exports = Dropdown;

已从无序列表类中完全删除状态
在下拉列表中为无序列表创建带状态值的toggleState属性
将该属性传递给无序列表的“下拉菜单”类
无序列表类：

render(){
  return(

    {/* whenClicked is a dropdown property  /*}
    <button onClick={this.props.whenClicked} type="button">
    .....
    </button>
    )

constructor(props) {
    super(props);
    this.state = {
        open:false
    }
}
render(){
    return(

         {/* toggle between show and hide  /*}
        <ul className={"dropdown-menu " + (this.state.open ? 'show' : '')}>
            {this.props.dropItems.map(function(item){
               ......
            })}
        </ul>
    )
}

   'use strict'; 
   var React = require('react'),
       Button = require('./button'),
       UnorderedList = require('./unordered-list');

   class Dropdown extends React.Component{

   constructor(props) {
      super(props);
      this.state = {
          open:false
      }

     // added this as an update to my question per ssorallen
        this.handleClick = this.handleClick.bind(this)
   }

   handleClick(){
      this.setState({open : !this.state.open});
   }

  render(){

      return(
          <div className="dropdown">
              {/* whenClicked is a property not an event, per se. */}
              <Button whenClicked={this.handleClick}  />
              ......
             {/* // prop.items comes from app.jsx  */}
              <UnorderedList dropItems={this.props.items} />
          </div>
      )
  } }

   module.exports = Dropdown;

 ....
       var selectItems = {
           title : "Choose a Fruit",
           items : [
               "Cantaloupe",
                .........
        ]
    }

    <Dropdown items={selectItems.items} multiSelect={true} title={selectItems.title} />
....

 'use strict';
 var React = require('react');

 class UnorderedList extends React.Component{

     constructor(props) {
         super(props);
     }
     render(){
         var listItemStyle = {
             cursor:'pointer'
         };

    return(
        <ul className={"dropdown-menu " + (this.props.toggleState ? 'show' : '')} role='menu' aria-labelledby='dropdownMenu1'>
            {this.props.dropItems.map(function(item){
                return (<li style={listItemStyle} key={item}><a>{item}</a></li>)
            })}
        </ul>
    )
} }

  module.exports = UnorderedList;

  'use strict';
  var React = require('react'),
      Button = require('./button'),
      UnorderedList = require('./unordered-list');

  class Dropdown extends React.Component{

      constructor(props) {
          super(props);
          this.state = {
              open:false
          }
          this.handleClick = this.handleClick.bind(this)
      }

handleClick(){
    this.setState({open : !this.state.open});
}

render(){
    return(
        <div className="dropdown">
            {/* whenClicked is a property not an event, per se. */}
            <Button whenClicked={this.handleClick} className="btn-warning" title={this.props.title} subTitleClassName="caret"></Button>
            <UnorderedList dropItems={this.props.items} toggleState={this.state.open} />
        </div>
    )
  }
 }
   module.exports = Dropdown;

“严格使用”；
var React=要求（'React'）；
类无序列表扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
变量listItemStyle={
光标：'指针'
};
返回(

{this.props.dropItems.map（函数（项））{
返回（
{item}
）
})}

)
} }
module.exports=无序列表；

下拉类：

render(){
  return(

    {/* whenClicked is a dropdown property  /*}
    <button onClick={this.props.whenClicked} type="button">
    .....
    </button>
    )

constructor(props) {
    super(props);
    this.state = {
        open:false
    }
}
render(){
    return(

         {/* toggle between show and hide  /*}
        <ul className={"dropdown-menu " + (this.state.open ? 'show' : '')}>
            {this.props.dropItems.map(function(item){
               ......
            })}
        </ul>
    )
}

   'use strict'; 
   var React = require('react'),
       Button = require('./button'),
       UnorderedList = require('./unordered-list');

   class Dropdown extends React.Component{

   constructor(props) {
      super(props);
      this.state = {
          open:false
      }

     // added this as an update to my question per ssorallen
        this.handleClick = this.handleClick.bind(this)
   }

   handleClick(){
      this.setState({open : !this.state.open});
   }

  render(){

      return(
          <div className="dropdown">
              {/* whenClicked is a property not an event, per se. */}
              <Button whenClicked={this.handleClick}  />
              ......
             {/* // prop.items comes from app.jsx  */}
              <UnorderedList dropItems={this.props.items} />
          </div>
      )
  } }

   module.exports = Dropdown;

 ....
       var selectItems = {
           title : "Choose a Fruit",
           items : [
               "Cantaloupe",
                .........
        ]
    }

    <Dropdown items={selectItems.items} multiSelect={true} title={selectItems.title} />
....

 'use strict';
 var React = require('react');

 class UnorderedList extends React.Component{

     constructor(props) {
         super(props);
     }
     render(){
         var listItemStyle = {
             cursor:'pointer'
         };

    return(
        <ul className={"dropdown-menu " + (this.props.toggleState ? 'show' : '')} role='menu' aria-labelledby='dropdownMenu1'>
            {this.props.dropItems.map(function(item){
                return (<li style={listItemStyle} key={item}><a>{item}</a></li>)
            })}
        </ul>
    )
} }

  module.exports = UnorderedList;

  'use strict';
  var React = require('react'),
      Button = require('./button'),
      UnorderedList = require('./unordered-list');

  class Dropdown extends React.Component{

      constructor(props) {
          super(props);
          this.state = {
              open:false
          }
          this.handleClick = this.handleClick.bind(this)
      }

handleClick(){
    this.setState({open : !this.state.open});
}

render(){
    return(
        <div className="dropdown">
            {/* whenClicked is a property not an event, per se. */}
            <Button whenClicked={this.handleClick} className="btn-warning" title={this.props.title} subTitleClassName="caret"></Button>
            <UnorderedList dropItems={this.props.items} toggleState={this.state.open} />
        </div>
    )
  }
 }
   module.exports = Dropdown;

“严格使用”；
var React=require（'React'），
按钮=需要（“./按钮”），
无序列表=需要（'./无序列表'）；
类下拉列表扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
开放：假
}
this.handleClick=this.handleClick.bind（this）
}
handleClick（）{
this.setState（{open:！this.state.open}）；
}
render（）{
返回(
{/*whenClicked本身是属性而不是事件。*/}
)
}
}
module.exports=下拉列表；
OK，我将“this.handleClick=this.handleClick.bind（this）”添加到下拉列表的构造函数中，不再出现错误，但无序列表不会改变其打开状态。我不知道您的示例中的div元素是什么。我看不出您的建议在哪里告诉我的无序列表切换它的打开状态。好的，我在下拉列表的构造函数中添加了“this.handleClick=this.handleClick.bind（this）”，并且不再得到错误，但无序列表没有改变它的打开状态。我不知道您的示例中的div元素是什么。我看不出您的建议是在告诉我的无序列表将其切换为打开状态。如果他们解决了您的问题，您真的应该接受这两个答案中的一个（我相信他们确实接受了）。就我个人而言，我认为艾伦回答你最初的问题最好。那些家伙花了些时间回答：“你欠他们那么多……”。。！如果他们解决了你的问题（我相信他们解决了），你真的应该接受这两个答案中的一个。就我个人而言，我认为艾伦回答你最好的答案