Make three components into two components

问题

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

回答1:

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

You currently set your initial data in 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>
        ]
    }

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

This is all removed; instead, we can just show

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

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

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

And now we can delete all the Basketball stuff.

See the Updated Fiddle.

来源：https://stackoverflow.com/questions/40832723/make-three-components-into-two-components

标签

javascript

html

css

reactjs

redux