React JS- 隐藏描述 div，除非发了相应的牌

Question

反应问题：我正在尝试实现这种根据是否发牌来激活div的方法。所以计划是div中会有一个拼写描述，如果卡数大于0(每张牌只有一个(，那么div将显示。 我打算举这个例子：

const Home = ({ posts }) => {
return (
<div>
{(() => {
if (posts) {
return <Posts posts={posts} />;
} else {
return <NoPosts />;
}
})()}
</div>
);

......然后将其切换为如下所示的内容：

const Awaken = ({ awakenCount }) => {
return (
<div>
{(() => {  {awakenCount && <Posts awakenCount={awakenCount}>{
<strong>Awaken:  </strong><p>Choose a player, they discard 2 ingredients of their choice.</p>
}</Posts>
}  {
!awakenCount && <NoPosts />
};
})
}</div> );
}

我收到各种各样的错误。不太确定我应该在"帖子"中放什么，或者 {s 和 (s 应该在哪里结束。有时帖子是未定义的，有时不是。 在函数中还是在函数外更好？两种方式都试过了。

附带说明一下，我的游戏将在没有此代码的情况下运行，但是只有在 VS 代码以红色突出显示的额外"}"时，它才会运行。所以也许这也可能是问题所在。

我在返回中调用该函数：

return (
<Awaken>
<Posts/>
<NoPosts/>
</Awaken>
)

Answer 1

你应该这样写：

const Awaken = ({ awakenCount }) => {
return (
<div>
{awakenCount && 
<Posts awakenCount={awakenCount}>
<strong>Awaken:  </strong><p>Choose a player, they discard 2 ingredients of their choice.</p>
</Posts>}
{!awakenCount && <NoPosts />}
</div>);
}

然后你会像这样使用它：

<Awaken awakenCount={2} />

希望这有帮助。