Javascript 反应'；s分量子项

嗨，我想知道是否有一种方法可以让孩子们选择div来避免道具

我试着改变

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

这是我的标签1内容！

在

表1
这是我的标签1内容！

首先，道具用于选项卡的标题，窗格组件的子组件用于选项卡的内容

我希望修改它，使其具有一个窗格组件，第一个div是选项卡的标题，第二个div是内容

可能吗

完整代码：

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

var Tabs=React.createClass({
显示名称：“选项卡”，
道具类型：{
选中：React.PropTypes.number，
儿童：React.PropTypes.oneOfType([
React.PropTypes.array，
React.PropTypes.element
]).需要
},
getDefaultProps:function（）{
返回{
已选：0
};
},
getInitialState:函数（）{
返回{
已选择：this.props.selected
};
},
shouldComponentUpdate（下一步，下一步状态）{
返回this.props！==nextrops | | this.state！==nextState；
},
handleClick：函数（索引、事件）{
event.preventDefault（）；
这是我的国家({
选定：索引
});
},
_rendertiles:function（）{
函数标签（子项、索引）{
var activeClass=this.state.selected==索引“active”：；
返回(


);
}
返回(

{this.props.children.map（labels.bind（this））}

);
},
_renderContent:function（）{
返回(
{this.props.children[this.state.selected]}
);
},
render:function（）{
返回(
{this.\u renderitles（）}
{this.\u renderContent（）}
);
}
});
var Pane=React.createClass({
显示名称：“窗格”，
道具类型：{
标签：React.PropTypes.string.isRequired，
子项：React.PropTypes.element.isRequired
},
render:function（）{
返回{this.props.children}；
}
});
var App=React.createClass({
render:function（）{
返回(
这是我的标签1内容！
这是我的标签2内容！
这是我的标签3内容！
);
}
});
render（，document.querySelector（“.container”）；

您只需使用props

标签

，并在返回的

窗格

组件中正确呈现其值

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

//ES6（使用解构）
var Pane=React.createClass({
显示名称：“窗格”，
道具类型：{
标签：React.PropTypes.string.isRequired，
子项：React.PropTypes.element.isRequired
},
render:function（）{
const{label}=this.props；
返回{label}{this.props.children}；
}
});
//ES5
var Pane=React.createClass({
显示名称：“窗格”，
道具类型：{
标签：React.PropTypes.string.isRequired，
子项：React.PropTypes.element.isRequired
},
render:function（）{
返回{this.props.label}{this.props.children}；
}
});

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