将三个组件组成两个组件 [英] Make three components into two components

问题描述

• 我有标签有三个不同的组件，但我想把它作为两个。


• 我想删除篮球组件并执行那些功能inside Sports组件本身


• 下面的行用于创建标签内容。所以我们不能删除窗格组件。
  {this.props.children}


• 基本上，我做的是用div标签封装我的内容。所以我想直接在调用组件


• 上提供我的代码 https://jsfiddle.net/9e767txs/76/

• I have tabs which have three different components but I am trying to make it as two.
• I wanted to remove the basketball component and execute those functionalities inside Sports component itself
• Below line is used for creating tab content. So we cant delete pane component. {this.props.children}
• Basically what I am doing is wrapping my content with a div tag. So I am trying to do it directly on the calling component
• providing my code below 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
};

推荐答案

这是一个清理代码和重新思考

This is a matter of cleaning up the code and rethinking how you want to pass the data in the first place.

您目前在 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 类：

What you can do instead is put all that data under a single wrapper div (which is required for React) and send it to the Sports class:

    // 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>,

注意我也添加了属性到元素你以前在篮球元素的顶层渲染中设置：

Notice I've also added the attributes to the elements that you used to be setting inside your top-level render on the Basketball elements:

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

我们可以进一步下载内容。

And we can worry about the contents further down the pipeline.

现在 Sports 将收到一个包含单独列表项内容的包装器 div 。所以我们只需要改变一行或两行来深入到那些子元素：

Now Sports will receive a wrapper div with the individual list item content inside. So we just have to change one or two lines to drill down to those children elements:

// 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

And now we can delete all the Basketball stuff.

请参阅更新的小提琴 。

这篇关于将三个组件组成两个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！