特定のタイプの子供を反応コンポーネントで要求する

Question

私はドロップダウンメニュー用のカスタム反応コンポーネントを作成しています。私は、このコンポーネントを使用するために念頭に置いていた構造が、私はこれを実装したかった方法

<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> 

のラインのうち何かだったその子供のDropdownTriggerコンポーネントがある場合Dropdownコンポーネントのチェックを持つことであり、そしてもし指定された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を持っています。つまり、開発者はDropdownコンポーネントの子として常にDropdownTriggerを含める必要があるため、開発者に<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;