Question

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

我想要一个用户可以导入e put childs组件的组件，如下例所示：

        <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

我不确定，因为我需要看一个“工作”的例子。你最后使用ReactDOM.render了吗？例如，您可以设置一个简单的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）=＆gt; child.props.tab === this.state.selected）;

当我打开这个问题时，选择了state.selectedProps of TabsLayout。

自定义组件作为React中组件的子组件

3 个答案: