自定义组件作为我的组件的孩子在React

Question

我想开发一个简单的TabsLayout组件。此组件显示标题中的所有标签，以及与选定标签关联的内容。

我想一个部件，其中用户可以导入e将孩子的组件这样的例子：

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

在这种情况下，X是可见的，并且Y和Z是隐藏的。所以gol只提供了一个名为Tabslayout的简单组件，没有回调。我不能undestrand如何渲染这个例子中的孩子becase X，Y，X（例如一些div或一些语义UI组件不渲染。

Answer 1

我不确定，因为我需要看到一个'工作'的例子。例如，您可以设置一个简单的React程序，如https://codepen.io/pkshreeman/pen/jwEbdO?editors=1011，以便我们可以尝试复制结果？

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

where state.selected selected我在打开这个问题时选择了TabsLayout。