在React中的onClick事件之后呈现多个元素

Question

我遇到一个问题，试图在onClick事件之后在react组件内呈现两个react元素。 想知道这是否有可能？ 我确定我搞砸了三元运算符，但是我无法想到另一种方法来做我想做的事情？

TL; DR ：“单击按钮时，我看到elementA 和 elementB”

这是代码片段：

import React, { Component } from 'react';

class MyComponent extends Component {
    constructor(props) {
    super(props)
    this.state = { showElement: true };
    this.onHandleClick = this.onHandleClick.bind(this);
  }

  onHandleClick() {
    console.log(`current state: ${this.state.showElement} and prevState: ${this.prevState}`);
    this.setState(prevState => ({ showElement: !this.state.showElement }) );
  };


  elementA() {
    <div>
      <h1>
      some data
      </h1>
    </div>
  }


  elementB() {
    <div>
      <h1>
      some data
      </h1>
    </div>
  }

  render() {
    return (
      <section>
          <button onClick={ this.onHandleClick } showElement={this.state.showElement === true}>
          </button>
          { this.state.showElement
            ?
            null
            :
            this.elementA() && this.elementB()
          }
      </section>
    )
  } 
}

export default MyComponent;

Answer 1

你只是不专心。

elementA() {
    return ( // You forget
        <div>
            <h1>
                some data
            </h1>
        </div>
    )
}

与元素B相同。

如果您想同时查看这两个组件，则应将三元组更改为

{ this.state.showElement
            ?
            <div> {this.elementA()} {this.elementB()}</div>
            :
            null
          }

另一个“和”，用于在state切换showElement就足够了this.setState({showElement: !this.state.showElement });

Answer 2

请尝试以下操作（我将在代码中添加注释，以解释发生了什么事情）：

function SomeComponentName() { // use props if you want to pass some data to this component. Meaning that if you can keep it stateless do so.
  return (
    <div>
      <h1>
      some data
      </h1>
    </div>
  );
}

class MyComponent extends Component {
  constructor(props) {
    super(props)
    this.state = { showElement: false }; // you say that initially you don't want to show it, right? So let's set it to false :)
    this.onHandleClick = this.onHandleClick.bind(this);
  }

  onHandleClick() {
    this.setState(prevState => ({ showElement: !prevState.showElement }) ); 
    // As I pointed out in the comment: when using the "reducer" version of `setState` you should use the parameter that's provided to you with the previous state, try never using the word `this` inside a "reducer" `setState` function
  };

  render() {
    return (
      <section>
          <button onClick={ this.onHandleClick } showElement={this.state.showElement === false}>
          </button>
          { this.state.showElement
            ? [<SomeComponentName key="firstOne" />, <SomeComponentName key="secondOne" />]
            : null
          }
      </section>
    )
  } 
}

export default MyComponent;