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

在

onClick

事件之后，尝试在react组件中呈现两个react元素时遇到问题。想知道这是否可能？我肯定我搞乱了三元运算符，但我不能想其他方法来做我想做的事情

TL；DR：“当我单击一个按钮时，我会看到元素a和元素B”

以下是代码片段：

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;

import React，{Component}来自'React'；
类MyComponent扩展组件{
建造师（道具）{
超级（道具）
this.state={showElement:true}；
this.onHandleClick=this.onHandleClick.bind（this）；
}
onHandleClick（）{
log（`current state:${this.state.showElement}和prevState:${this.prevState}`）；
this.setState（prevState=>（{showElement:！this.state.showElement}））；
};
元素a（）{
一些数据
}
元素b（）{
一些数据
}
render（）{
返回(
{this.state.showElement
?
无效的
:
this.elementA（）和&this.elementB（）
}
)
} 
}
导出默认MyComponent；

你就是不注意

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

elementA（）{
return（//您忘记了
一些数据
)
}

在元素B中也是如此

如果你想看到这两个组件，你应该把你的三元组改为

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

{this.state.showElement
?
{this.elementA（）}{this.elementB（）}
:
无效的
}

另一个“and”，用于在

状态下切换
showElement
this.setState（{showElement:！this.state.showElement}）
试试这个（我会在代码中添加注释，试图解释发生了什么）：

function SomeComponentName（）{//如果要将一些数据传递到此组件，请使用props。这意味着如果可以使其保持无状态，请这样做。
返回(
一些数据
);
}
类MyComponent扩展组件{
建造师（道具）{
超级（道具）
this.state={showElement:false}；//您说最初您不想显示它，对吗？所以让我们将其设置为false:）
this.onHandleClick=this.onHandleClick.bind（this）；
}
onHandleClick（）{
this.setState（prevState=>（{showElement:！prevState.showElement}））；
//正如我在评论中指出的那样：当使用'setState'的“reducer”版本时，应该使用前一个状态提供给您的参数，尽量不要在“reducer”`setState`函数中使用'this`这个词
};
render（）{
返回(
{this.state.showElement
? [, ]
：null
}
)
} 
}
导出默认MyComponent；
它可能是不相关的，但是如果您使用的是
setState
的“reducer”版本，您应该这样做：
this.setState（prevState=>（{showElement:！prevState.showElement}））如果
状态.showElement
为
真
呈现
空
？。。。有点奇怪，不是吗？@Andrew谢谢，伙计，我已经用这个敲了我的头好几个小时了。返回的
是一个输入错误：）再次感谢你！！！！乔塞普，只想让你知道一件小事，我们可以编辑和删除我们的答案，而不是写一个新的：）@Josep谢谢你的解释。虽然，对
键的部分理解不太清楚。@intercoder看看这个：@intercoder TL；DR：无论何时渲染一个元素数组，每个元素都应该有一个唯一的键。。。否则，React将向您发出警告，如“阵列中的每个孩子都应该有一个唯一的钥匙道具”
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;