反應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：type不能為null，undefined，boolean或number。 它應該是一個字符串（對於DOM元素）或一個ReactClass（對於復合組件）。 檢查Tabs的渲染方法。

和

未捕獲的錯誤：始終違規：元素類型無效：預期為字符串（對於內置組件）或類/函數（對於復合組件），但得到：未定義。 檢查Tabs的渲染方法。

這是jsfiddle鏈接

Answer 1

onClick處理程序handleClick將作為第一個參數（而不是鍵）傳遞給事件。 如果要將鍵發送給函數，則可以創建帶有所需參數的內聯函數，調用handleClick 。

您還在提琴中使用了舊版本的React，但沒有在React 16中引入的React.Fragment ，並且最頂層的div元素上的class prop應該是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>
    );
  }
}

Answer 2

在您的小提琴中，它不起作用，因為使用了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'));