[英]Conditionally rendering contents of a button
I am making a memory game, CodeSandbox , and I am trying to accomplish the following: 我正在做一个记忆游戏CodeSandbox ,我正在尝试完成以下任务:
I tried adding a "buttonMask" class in the parent div but it overrides my existing class. 我尝试在父div中添加“ buttonMask”类,但它覆盖了我现有的类。 I tried display: none in the parent div also, no luck.
我试过显示:父div也没有,也没有运气。
Other attempts included adding a state property to the Card.js component this.state.isHidden: true and trying to toggle the visibility. 其他尝试包括向Card.js组件this.state.isHidden:true添加state属性,并尝试切换可见性。 I read the docs, This , SO , and eddyerburgh .
我阅读了This , SO和eddyerburgh的文档 。 I'm stuck on this condition render, everything else works great, this piece got me
我被困在这种情况下渲染,其他一切都很好,这块让我
This is my conditional for dealing the cards 这是我发卡的条件
class Cards extends Component {
constructor(props) {
super(props);
}
render() {
const card = (
<div style={sty}>
{this.props.cardTypes ? (
this.props.cardTypes.map((item, index) => {
return (
<button style={cardStyle} value={item} key={index}>
{" "}
{item}{" "}
</button>
);
})
) : (
<div> No Cards </div>
)}
</div>
);
return <Card card={card} removeMatches={this.props.removeMatches}
/>;
}
Originally, when I first tried this, I was passing state to all the cards, not just individual cards, that was why I was not able to toggle them individually. 最初,当我第一次尝试此操作时,我将状态传递给所有卡,而不仅仅是单个卡,这就是为什么我无法单独切换它们的原因。
This was the original render in Cards.js 这是Cards.js中的原始渲染
if (this.state.hidden) {
return (
<button
key={card + index}
style={btn}
onClick={this.revealIcon}
id={card}
>
<div style={btnMask}>{card}</div>
</button>
);
} else {
return (
<button
key={card + index}
style={btn}
onClick={this.revealIcon}
id={card}
>
<div>{card}</div>
</button>
);
}
You can conditionally render an element with an inline if with logical &&: 如果使用逻辑&&,则可以有条件地使用内联呈现元素:
return(
<div>
{this.props.shouldRenderTheThing &&
<span>Conditionally rendered span</span>}
</div>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.