用UI状态反应哑组件

Question

我想用React构建一个select输入组件。 select应该是哑组件，因为它只是一个UI组件，但它也有自己的状态（是否显示选项列表）

我该如何管理这个州？

return (
    const Select = (props) => {
        <div>
            <label>{placeholder}</label>
            {/*some toggle state*/ && <div>props.children</div>}
        </div>   
    }
)

谢谢！

Answer 1

你不应该因为“它只是一个UI组件”这一事实而感到困惑。任何具有内部状态的东西都应该是一个类。

你的代码，一个下拉列表，是我应该使用内部状态的例子。

使用setState()管理您的州。

Answer 2

现在你的组件是无状态的，但你需要一个有状态的。

例如：

class Select extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: '', toggle: false};
  }

  render() {
    return (
       <div>
        <label>{placeholder}</label>
        {this.state.toggle && <div>this.props.children</div>}
       </div>   
    );
  }
}

你应该用setState函数改变状态。

有关更多信息，请查看此article。

Answer 3

根据你的代码，你渲染的是stateless component，所以它不会有任何状态。

您可以做的是将state从父组件传递到此组件，如下所示：

constructor(props) {
  this.state = { showDumbComponent:true }
}

render() {
  <DumbComponent show={this.state.showDumbComponent} />
}