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。

将三个组件分为两个组件

1 个答案: