javascript - react createElement 和不变错误

Question

我试着适应这个tabs react 。想法是为使用 handleclick 函数点击的键添加 active 类

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、undefined、boolean 或 number。它应该是一个字符串(对于 DOM 元素)或一个 ReactClass(对于复合组件)。检查 Tabs 的渲染方法。

和

未捕获错误:不变违规:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)但得到:未定义。检查 Tabs 的渲染方法。

这里是 jsfiddle link

Answer 1

在你的 Fiddle 中它不工作，因为使用了 React.Fragment。

无论如何，即使使用之前的更正它也不会工作，因为 this.props.key 没有引用好的变量。

试试这个

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