javascript - 在 React Component 中需要某种类型的 child

Question

我正在为下拉菜单创建自定义 React 组件。我想使用这个组件的结构是

<Dropdown>
  <DropdownTrigger> // The button that triggers the dropdown to open or close
    open me
  </DropdownTrigger>
  <DropdownButton> // A button inside the dropdown
    Option 1
  </DropdownButton>
</Dropdown>

我想实现这个的方法是让 Dropdown组件检查是否有 DropdownTrigger子组件，如果有，克隆给定的 DropdownTrigger组件使用 React.cloneElement并传递 onClick属性，调用 Dropdown 上的状态更新组件。

Dropdown.js 的小代码片段

  import DropdownTrigger from './DropdownTrigger';

  _toggleDropdown () {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }


  _renderTriggerButton () {
    const triggerChild = this.props.children.find(child => child.type === DropdownTrigger);
    return React.cloneElement(triggerChild, {
      ...triggerChild.props,
      onClick: () => this._toggleDropdown()
    });
  }

这是一种正确的方法吗？如果是，那么验证 Dropdown 的最干净/最好的方法是什么？组件有一个 DropdownTrigger作为 child 。因为这意味着开发人员总是必须包含 DropdownTrigger作为 Dropdown 的 child 组件，我想有一个很好的方法来告诉开发人员他们应该通过 <TriggerButton>组件作为下拉列表的子项。

我也乐于听取有关结构更改的建议。谢谢!

Answer 1

使用 React.cloneElement将附加属性传递给子组件。结合instanceof你可以做你想做的事。

---

这可能是沿着线...

import React from 'react';
import DropdownTrigger from './DropdownTrigger';

class DropDown extends React.Component {
  constructor(props) {
    super(props);
  }

  ...

  render() {
    return (
      <div>
        {React.Children.map(this.props.children, child => {
          const additionalProps = {}
          // add additional props if it's the DropdownTrigger
          if (child instanceof DropdownTrigger) {
            additionalProps.toggleDropDown = () => { } ...
          }

          return React.cloneElement(child, additionalProps);
        })}
      </div>
    );
  }
}

export default DropDown;