在React中的onClick事件之后呈现多个元素
在React中的onClick事件之后呈现多个元素
提问于 2017-07-04 20:44:45
在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;回答 2
Stack Overflow用户
回答已采纳
发布于 2017-07-04 20:51:55
你只是漫不经心。
elementA() {
return ( // You forget
<div>
<h1>
some data
</h1>
</div>
)
}在元素B中也是如此。
如果你想同时看到这两个组件，你应该把你的三元组改为
{ this.state.showElement
?
<div> {this.elementA()} {this.elementB()}</div>
:
null
}另一个“state”，用于在state just enough this.setState({showElement: !this.state.showElement });中切换showElement
Stack Overflow用户
发布于 2017-07-04 21:13:32
尝试这样做(我将在代码中添加注释，试图解释是怎么回事)：
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;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44906363
复制相关文章
相似问题