javascript - 反应 createElement 和不变的错误

Question

我尝试调整此选项卡以做出反应。这个想法是为使用 handleclick 功能单击的键添加活动类

class Tabs extends React.Component {
  constructor(props) {
    super(props);
    this.state = { selected: 0 };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(key, event) {
    event.preventDefault();
    this.setState({
      selected: key
    });
  }
  render() {
    var activeClass = this.state.selected === this.props.key ? "active" : "";
    return (
      <React.Fragment>
        <div class="tab">
          <button
            key="1"
            className={"tablinks" + activeClass}
            onClick={this.handleClick}
          >
            London
          </button>
          <button
            key="2"
            className={"tablinks" + activeClass}
            onClick={this.handleClick}
          >
            Paris
          </button>
          <button
            key="3"
            className={"tablinks" + activeClass}
            onClick={this.handleClick}
          >
            Tokyo
          </button>
        </div>
        <div key="1" className={"tabcontent" + activeClass}>
          <h3>London</h3>
          <p>London is the capital city of England.</p>
        </div>

        <div key="2" className={"tabcontent" + activeClass}>
          <h3>Paris</h3>
          <p>Paris is the capital of France.</p>
        </div>

        <div key="3" className={"tabcontent" + activeClass}>
          <h3>Tokyo</h3>
          <p>Tokyo is the capital of Japan.</p>
        </div>
      </React.Fragment>
    );
  }
}

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

但我得到两个错误：

警告：React.createElement：类型不应为 null、未定义、布尔值或数字。它应该是一个字符串（对于 DOM 元素）或一个 ReactClass（对于复合组件）。检查Tabs.

和

未捕获的错误：不变违规：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。检查Tabs.

这是jsfiddle链接

标签： javascriptreactjs

Answer 1

onClick处理程序将handleClick作为第一个参数传递事件，而不是键。如果您想将密钥发送给函数，您可以创建一个handleClick使用所需参数调用的内联函数。

你还在你的小提琴中使用了一个旧版本的 React，它没有React.Fragment在 React 16 中引入，class你最顶层元素上的 propdiv应该是className.

例子

class Tabs extends React.Component {
  state = { selected: 0 };

  handleClick = key => {
    this.setState({
      selected: key
    });
  };

  render() {
    var activeClass = this.state.selected === this.props.key ? " active" : "";
    return (
      <React.Fragment>
        <div className="tab">
          <button
            key="1"
            className={"tablinks" + activeClass}
            onClick={() => this.handleClick(1)}
          >
            London
          </button>
          <button
            key="2"
            className={"tablinks" + activeClass}
            onClick={() => this.handleClick(2)}
          >
            Paris
          </button>
          <button
            key="3"
            className={"tablinks" + activeClass}
            onClick={() => this.handleClick(3)}
          >
            Tokyo
          </button>
        </div>
        <div className={"tabcontent" + activeClass}>
          <h3>London</h3>
          <p>London is the capital city of England.</p>
        </div>

        <div className={"tabcontent" + activeClass}>
          <h3>Paris</h3>
          <p>Paris is the capital of France.</p>
        </div>

        <div className={"tabcontent" + activeClass}>
          <h3>Tokyo</h3>
          <p>Tokyo is the capital of Japan.</p>
        </div>
      </React.Fragment>
    );
  }
}