React的子组件

Question

Hi I wonder if there's a way in react to choose div in children in order to avoid prop

I try to change

<Pane label="Tab 1">
   <div>This is my tab 1 contents!</div>
</Pane>

in

<Pane>
   <div>Tab 1</div>
   <div>This is my tab 1 contents!</div>
</Pane>

In the first place the prop is used for the title of the tab and the children of the pane component the content of the tab.

I wish to modify that to have a Pane component with the first div the title of the tab and the second the content

Is it possible?

The complete code:

var Tabs = React.createClass({
  displayName: "Tabs",
  propTypes: {
    selected: React.PropTypes.number,
    children: React.PropTypes.oneOfType([
      React.PropTypes.array,
      React.PropTypes.element
    ]).isRequired
  },
  getDefaultProps: function() {
    return {
      selected: 0
    };
  },
  getInitialState: function() {
    return {
      selected: this.props.selected
    };
  },
  shouldComponentUpdate(nextProps, nextState) {
    return this.props !== nextProps || this.state !== nextState;
  },
  handleClick: function(index, event) {
    event.preventDefault();
    this.setState({
      selected: index
    });
  },
  _renderTitles: function() {
    function labels(child, index) {
      var activeClass = this.state.selected === index ? "active" : "";
      return (
        <li key={index}>
          <a
            href="#"
            className={activeClass}
            onClick={this.handleClick.bind(this, index)}
          >
            {child.props.label}
          </a>
        </li>
      );
    }
    return (
      <ul className="tabs__labels">
        {this.props.children.map(labels.bind(this))}
      </ul>
    );
  },
  _renderContent: function() {
    return (
      <div className="tabs__content">
        {this.props.children[this.state.selected]}
      </div>
    );
  },
  render: function() {
    return (
      <div className="tabs">
        {this._renderTitles()}
        {this._renderContent()}
      </div>
    );
  }
});

var Pane = React.createClass({
  displayName: "Pane",
  propTypes: {
    label: React.PropTypes.string.isRequired,
    children: React.PropTypes.element.isRequired
  },
  render: function() {
    return <div>{this.props.children}</div>;
  }
});

var App = React.createClass({
  render: function() {
    return (
      <div>
        <Tabs>
          <Pane label="Tab 1">
            <div>This is my tab 1 contents!</div>
          </Pane>
          <Pane label="Tab 2">
            <div>This is my tab 2 contents!</div>
          </Pane>
          <Pane label="Tab 3">
            <div>This is my tab 3 contents!</div>
          </Pane>
        </Tabs>
      </div>
    );
  }
});

ReactDOM.render(<App />, document.querySelector(".container"));

Answer 1

You just need to use the props label and render its value properly inside your return of the Pane component.

// ES6 (using destructuring)
var Pane = React.createClass({
  displayName: "Pane",
  propTypes: {
    label: React.PropTypes.string.isRequired,
    children: React.PropTypes.element.isRequired
  },
  render: function() {
    const { label } = this.props;
    return <div><div>{label}</div>{this.props.children}</div>;
  }
});

// ES5
var Pane = React.createClass({
  displayName: "Pane",
  propTypes: {
    label: React.PropTypes.string.isRequired,
    children: React.PropTypes.element.isRequired
  },
  render: function() {
    return <div><div>{this.props.label}</div>{this.props.children}</div>;
  }
});