カスタムコンポーネントをReact内のコンポーネントの子として使用する

Question

シンプルなTabsLayoutコンポーネントを開発したいと考えています。このコンポーネントは、ヘッダー内のすべてのタブと、選択されたタブに関連付けられたコンテンツである単一のコンテンツを表示します。

Iは、ユーザが電子をインポートすることができる成分は、この例のようにチャイルズ成分を入れたい：この場合

 <TabsLayout tabs={["Description","Flow","History"]} selected="Description"> 
      <X tab="Description"/> 
      <Y tab="Flow"/> 
      <Z tab="History"/> 
     </TabsLayout> 

Xが表示され、そしてYおよびZが隠されています。だから、golはデバックのためにコールバックのないTabslayoutという単純なコンポーネントしか提供していません。私は、この例ではX、Y、Xの子をレンダリングする方法を思いつくことができません（例えばdivやセマンティックUIコンポーネントはレンダリングされません）。

Answer 1

「実用的な」例が必要なのかどうか不明です。たとえば、https://codepen.io/pkshreeman/pen/jwEbdO?editors=1011のような単純なReactプログラムをセットアップして、結果を複製しようとすると、結果を複製することができますか？を最後に使用しましたか？

Answer 2

レンダリングする前にタブをフィルタリングする必要があります。作業例。

const TabsLayout = ({tabs, selected, onSelect, children}) => (
 
    <div> 
 
    {tabs.map((t) => 
 
     selected === t 
 
     ? <b>{t} </b> 
 
     : <a href="#" onClick={() => onSelect(t)}>{t} </a>) 
 
    } 
 
    <div>  
 
     {React.Children.toArray(children).filter(({props}) => selected === props.tab)} 
 
    </div> 
 
    </div> 
 
); 
 

 
const X = ({tab}) => <div>X: {tab}</div>; 
 
const Y = ({tab}) => <div>Y: {tab}</div>; 
 
const Z = ({tab}) => <div>Z: {tab}</div>; 
 

 
let selected = 'Description'; 
 
function handleSelection(tab) { 
 
    selected = tab; 
 
    renderTabs(); 
 
} 
 

 
function renderTabs() { 
 
    ReactDOM.render(
 
    <TabsLayout 
 
     tabs={["Description","Flow","History"]} 
 
     selected={selected} 
 
     onSelect={handleSelection} 
 
    >  
 
     <X tab="Description"/> 
 
     <Y tab="Flow"/> 
 
     <Z tab="History"/> 
 
    </TabsLayout>, 
 
    document.getElementById('app') 
 
); 
 
} 
 

 
renderTabs();

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="app"></div>

Answer 3

私は助けてくれてありがとうございましたが、解決策を見つけました。 は単純に、私は

リターンthis.props.children.find（（子）=> child.props.tab === がthis.state.selected）を呼び出します。

ここで、この質問を開いたときにstate.selectedが選択されました.Lapsoutのタブです。