javascript - 单击时显示 react 组件

Question

我尝试用谷歌搜索这个并搜索堆栈溢出，但这些似乎都没有真正帮助我解决问题。我正在尝试设置两个按钮。单击每个时，我希望它呈现其各自的组件。这是我目前正在做的改变状态的事情。

import React, { Component } from 'react';
import Structured from '../Structured/Structured';
import YC from '../YC/YC';

class Home extends Component {
constructor() {
  super();
  this.state = {
    YC: false,
    Structured: false
  }
}

ycClick() {
    this.setState({
      YC: true,
      Structured: false
    });
  }


structuredClick() {
    this.setState({
      Structured: true,
      YC: false
    });
  }


render() {
  const { isSignedIn, route } = this.state;
  return (
    <div>
    <h1>Rick's Notes</h1>
    <div class="ph3">
        <a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-black pa2 ma2" href="#0" onClick={this.ycClick}>YC vs. Non. YC</a>
        {this.state.YC ? <YC /> : null}
        <a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-black pa2 ma2" href="#0" onClick={this.structuredClick}>Structured Note Descriptions</a>
        {this.state.Structured ? <Structured /> : null}
    </div>
    </div>
  );
}
}

export default Home;

我试图做到这一点，以便在单击时将 YC(或结构化)设置为 true，如果 this.state.yc 为 true，它会返回组件。但是，它说这是未定义的，所以它们一定是我调用组件的方式的问题。谢谢你的帮助。让我知道是否还有其他我应该指定的内容。

Answer 1

使用this.ycClick.bind(this)代替this.ycClick(与this.structuredClick相同)