Question

我有以下代码，面向ReactBootstrap Components DropdownButton和MenueItem：

class Dropdown extends Component {
  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}

class DropdownItem extends Component {
  handleClick(event) {
    if (this.props.disabled) {
      event.preventDefault();
      event.stopPropagation();
      return false;
    }
    if (this.props.onSelect) {
      this.props.onSelect(event, this.props.eventKey);
    }
  }
  render() {
    return (
      <div onClick={this.handleClick}>
        {this.props.children}
      </div>
    );
  }
}

我称之为：

<Dropdown onSelect={this.handleOnSelect}>
    <DropdownItem eventKey="categorize"><i className="icon fa fa-filter"></i>Fotos kategorisieren</DropdownItem>
    <DropdownItem eventKey="share"><i className="icon fa fa-link"></i>Fotos freigeben</DropdownItem>
</Dropdown>

我的问题：DropdownItem不知道this.props.onSelect，所以它没有在Dropdown组件中调用我的onSelect。选择不起作用。

任何人都可以帮助我吗？

Answer 1

您是否可以尝试将handleOnSelect函数作为DropdownItem的prop传递？像

这样的东西

<Dropdown onSelect={this.handleOnSelect}>
  <DropdownItem eventKey="categorize" onSelect={this.handleOnSelect}><i className="icon fa fa-filter"></i>Fotos kategorisieren</DropdownItem>
  <DropdownItem eventKey="share" onSelect={this.handleOnSelect}><i className="icon fa fa-link"></i>Fotos freigeben</DropdownItem>
</Dropdown>

我认为您可能会感到困惑，并认为您只能将道具传递给顶级渲染组件，但事实上您可以将它们传递到您想要的JSX中的任何位置。

Answer 2

DropdownItems可以通过在Dropdown组件

上添加它来自动从Dropdown道具继承

{React.cloneElement(this.props.children, {...this.props})}

或仅指定所需的道具

{React.cloneElement(this.props.children, {onSelect: this.props.onSelect})}

多个子元素的

编辑

{React.Children.map(this.props.children, child => React.cloneElement(child, {onSelect: this.props.onSelect}))}

Answer 3

好的，我有。以下作品：

{React.Children.map(this.props.children, child => {
  return React.cloneElement(child, { onSelect: this.props.onSelect })
})}

谢谢@MichaelRasoahaingo的帮助！

Dropdown-Item的选择不起作用

3 个答案: