OnClick не создает новый компонент реакции.

Я новичок в мире реагирования, и у меня есть строка вроде этого:

<Button onClick={() => console.log("hello")}>Button</Button>

и при нажатии вы получите hello, напечатанный на консоли. Теперь измените строку на:

<Button onClick={() => <NewComponent />}>Button</Button>

теперь, нажав на кнопку, я ожидаю, что будет отображаться NewComponent. Но это не так.

Я не уверен, почему так. Обратите внимание, что у меня есть код выше в методе render.

Ответ 1

Вероятно, вы хотите иметь компонент с состоянием, который показывает другой компонент рядом с кнопкой после его нажатия. Все, что вам нужно сделать, это отслеживать, была ли нажата кнопка:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showComponent: false,
    };
    this._onButtonClick = this._onButtonClick.bind(this);
  }

  _onButtonClick() {
    this.setState({
      showComponent: true,
    });
  }

  render() {
    return (
      <div>
        <Button onClick={this._onButtonClick}>Button</Button>
        {this.state.showComponent ?
           <NewComponent /> :
           null
        }
      </div>
    );
  }
}

Ответ 2

Вот CodePen, чтобы показать его в действии.

HTML

<div id="root">loading...</div>

JSX

class NewComponent extends React.Component {
  render() {
    return (
      <div {...this.props}>
        new component
      </div>
    );
  }  
}

class Button extends React.Component {
  render() {
    return (
      <button {...this.props}>
        click
      </button>
    );
  }  
}

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      clicked: false
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({
      clicked: true
    });
  }

  render() {
    return (
      <div>
        <Button onClick={this.handleClick} />
        {this.state.clicked ? <NewComponent /> : null}
      </div>
    );
  }
};

React.render(
  <App />,
  document.getElementById("root")
);

Ответ 3

Вместо этого используйте: {this.state.clicked && <NewComponent/>}

Ответ 4

Вам нужно установить состояние, чтобы отслеживать видимость компонента. По умолчанию это false, и онклик устанавливает состояние в true. : ноль}