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

根据您的代码，您渲染的内容是stateless component，因此它不会有任何状态。

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

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

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

Answer 3

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

例如：

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。

用UI状态反应哑组件

3 个答案: