Question

我尝试对此tabs做出反应。想法是为使用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 link

Answer 1

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

您还将在自己的提琴中使用不具有React 16中引入的React.Fragment的旧版React，并且应该在最顶部class元素上使用div道具是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'));

反应createElement和不变错误

2 个答案: