Javascript react createElement和不变错误

我试着适应这种反应。 其思想是为使用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.Component{
建造师（道具）{
超级（道具）；
this.state={selected:0}；
this.handleClick=this.handleClick.bind（this）；
}
handleClick（键、事件）{
event.preventDefault（）；
这是我的国家({
选定：键
});
}
render（）{
var activeClass=this.state.selected==this.props.key“active”：；
返回(
伦敦
巴黎
东京
伦敦
伦敦是英国的首都

巴黎
巴黎是法国的首都

东京
东京是日本的首都

);
}
}
render（，document.querySelector（“.container”）；

但我有两个错误：

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

选项卡的渲染方法

及

未捕获错误：不变冲突：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。检查
选项卡的渲染方法

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

您还在小提琴中使用旧版本的React，它没有React 16中引入的
React.Fragment
，最上面的
div
元素上的
class
道具应该是
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>
    );
  }
}

类选项卡扩展了React.Component{
状态={所选：0}；
handleClick=key=>{
这是我的国家({
选定：键
});
};
render（）{
var activeClass=this.state.selected==this.props.key“active”：；
返回(
this.handleClick（1）}
>
伦敦
this.handleClick（2）}
>
巴黎
this.handleClick（3）}
>
东京
伦敦
伦敦是英国的首都

巴黎
巴黎是法国的首都

东京
东京是日本的首都

);
}
}
在您的小提琴中，由于使用了React.Fragment，因此它不起作用

无论如何，即使使用以前的更正，它也不会工作，因为this.props.key不引用good变量

试试这个

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

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

    isActive (key) {
        return this.state.selected === key ? 'active' : ''
    }

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

  <div key='2' className={'tabcontent'+ this.isActive('2')}>
    <h3>Paris</h3>
    <p>Paris is the capital of France.</p> 
  </div>

  <div key='3' className={'tabcontent'+ this.isActive('3')}>
    <h3>Tokyo</h3>
    <p>Tokyo is the capital of Japan.</p>
  </div>
  </div>
  );
    }
  }
  ReactDOM.render(<Tabs />, document.querySelector('.container'));

类选项卡扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={selected:'1'}；
this.handleClick=this.handleClick.bind（this）；
}
把手舔（键）{
这是我的国家({
选定：键
});
}
isActive（键）{
返回this.state.selected==键“活动”：”
}
render（）{
var activeClass=（this.state.selected==this.props.key？'active'：“”）；
返回(
这个.handleClick（“1”）}>伦敦
这个.handleClick（“2”）}>巴黎
这个.handleClick（“3”）}>东京
伦敦
伦敦是英国的首都

巴黎
巴黎是法国的首都。

东京
东京是日本的首都

);
}
}
ReactDOM.render（，document.querySelector（'.container'）；