Question

你好，我想知道是否有一种方法可以避免在儿童中选择div来避免道具

我尝试改变

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

在

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

首先，该道具用于选项卡的标题，而窗格的子级则用于选项卡的内容。

我希望将其修改为具有Pane组件，其中第一个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"));

Answer 1

您只需要使用道具label，并在返回Pane组件内正确呈现其值。

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

React的子组件

1 个答案: