将三个组件变成两个组件

Question

• 我有包含三个不同组件的选项卡，但我正在尝试将其设为两个。
• 我想移除篮球组件并在 Sports 组件内部执行这些功能
• 下一行用于创建标签内容。所以我们不能删除窗格组件。 {this.props.children}
• 基本上我正在做的是用 div 标签包装我的内容。所以我试图直接在调用组件上做它
• 在https://jsfiddle.net/9e767txs/76/下方提供我的代码

class Basketball extends React.Component {
    render () {
    return (
        <div>
        {this.props.children}
      </div>
    );
  }
};

Basketball.propTypes = {
    label: React.PropTypes.string.isRequired,
    //children: React.PropTypes.element.isRequired
};

Answer 1

这是一个清理代码并重新考虑如何首先传递数据的问题。

您目前在state.panes中设置了初始数据：

    this.state = {
        'panes' : [ 
            <div className="sports-tab-content">
                <p className="sports-large-text jumping1 jumping2">
                    1testing here testing here
                </p>
            </div>,
            <div className="sports-tab-content">
                <p className="sports-large-text jumping1 jumping2">
                    1testing here testing here
                </p>
            </div>,
            <div className="sports-tab-content">
                <p className="sports-large-text jumping1 jumping2 jumping3">
                    1testing here testing here
                </p>
            </div>,
            <div className="sports-tab-content">
                <p className="sports-large-text jumping1 jumping2 jumping3 jumping4">
                    1testing here testing here
                </p>
            </div>
        ]
    }

您可以做的是将所有数据放在单个包装器 div（React 需要）下并将其发送到 Sports 类：

    // Enclosing div
        <div>
            <div label="hand" subtitle="swimmings 1 and 2" liClass="sports-setup-ico first-time-active ft-active-tab" className="sports-tab-content">
                <p className="sports-large-text jumping1 jumping2">
                    1testing here testing here
                </p>
            </div>
            <div label="leg" subtitle="Approx. swimming 3" liClass="sports-invest-ico" className="sports-tab-content">
                <p className="sports-large-text jumping1 jumping2">
                    2testing here testing here
                </p>
            </div>
            <div label="stomach" subtitle="Approx. swimming 4" liClass="sports-balance-ico" className="sports-tab-content">
                <p className="sports-large-text jumping1 jumping2 jumping3">
                    3testing here testing here
                </p>
            </div>
            <div label="finger" subtitle="Approx. swimming 5" liClass="sports-perf-ico" className="sports-tab-content">
                <p className="sports-large-text jumping1 jumping2 jumping3 jumping4">
                    4testing here testing here
                </p>
            </div>
          </div>,

请注意，我还将属性添加到您以前在 Basketball 元素上的顶级渲染中设置的元素：

<Basketball label="hand" subtitle="swimmings 1 and 2" liClass="sports-setup-ico first-time-active ft-active-tab">
    {this.state.panes[0]}
</Basketball>
....

这一切都被删除了；相反，我们可以显示

 <Sports selected={0} changeContent={this.changeContent}>
     {this.state.panes}
 </Sports>

我们可以担心管道中的内容。

现在Sports 将收到一个包装器div，其中包含单个列表项内容。所以我们只需要更改一两行来深入了解这些子元素：

// We passed the content in a wrapper div, get rid of it
var parent = this.props.children;
console.log(parent);
var children = parent.props.children;

...

return (
  <ul className="tabs__labels">
    {children.map(labels.bind(this))}
  </ul>
);

现在我们可以删除所有Basketball 的东西了。

请参阅Updated Fiddle。