Javascript 为什么在调用对象时不应用对象内部定义的三元条件

我正处于react的学习阶段，我已经定义了一个包含三元运算符条件的内联样式的对象，但它根本不起作用！有人能帮我如何做到这一点吗

import React from 'react';

function Joke(props)
{
    const styles = {
    fontSize: "30px",
 display: props.question && props.answer ? "block" : "none",
 display: props.punchline ? "block" : "none",
 color: !props.question && "#888888"
  }
    return(
        <div>
    <p className="qus" style={styles}> {props.jokes.question} </p>
     <p className="ans" style={styles}> {props.jokes.answer} </p>
        <p className="punch" style={styles}> {props.jokes.punchline} </p>
        </div>

    )
}

export default Joke

/*--------------------------------------------------------------------*/

import React from 'react';
import Joke from "./Joke"

function App()
{



    return (
        <div>
        <Joke jokes={{
            question:"who is the president",
            answer:"Trump"}} />

        <Joke jokes={{
                 punchline: "hey look there is no question and answer here but there is no space been taken by those"}} />
        <Joke  jokes={{
            question:"what is 1+1",
            answer:"11"}}/> 

         </div>    
    )
}
export default App

从“React”导入React；
功能笑话（道具）
{
常量样式={
字体大小：“30px”，
显示：props.question&&props.answer？“块”：“无”，
显示：props.punchline？“块”：“无”，
颜色：！props.question&“8888888”
}
返回(
{props.crops.question}
{props.crops.ans}
{props.crooks.punchline}
)
}
导出默认值
/*--------------------------------------------------------------------*/
从“React”导入React；
从“/笑话”导入笑话
函数App（）
{
返回(
)
}
导出默认应用程序

在一些场景中，我发送带有问答的对象，在一些场景中，我只是发送一个笑话而不是问答，有人能告诉我，是否有一种方法可以在对象内部设置一个三元条件，以便每次都应用它，当我将道具对象作为参数传递给笑话函数时，您可以使用“getter”函数：

const styles = {
  fontSize: "30px",
  get display() {
    return props.question && props.answer || props.punchline ? "block" : "none";
  },
  get color() {
    return !props.question && "#888888"
  }
};

---

请注意，如果某个东西在某处更改了

道具

对象的内容，这只会产生与您想要的效果类似的效果。如果这种效果从未改变，那么您使用这种设置就有点运气不佳。

我认为您真正想要的是基于

道具的属性有条件地呈现
图形，如下所示：


功能笑话（道具）{
常量样式={
尺寸：30，
颜色：！道具。笑话。问题和“#888”
}
返回(
{props.crooks.question&
{props.crooks.question}
}
{props.crooks.answer&
{props.crooks.answer}
}
{props.crooks.punchline&&
{props.crooks.punchline}
}
)
}
函数App（）{
返回(
)
}
ReactDOM.render（，document.getElementById（'root'））


您必须使属性具有getter/setter方法。否则，对象初始值设定项表达式只运行一次。@Pointy能否请您用一个例子详细说明一下，我是一名学习编码的学生，今天刚刚开始反应……您在这一点上的任何帮助都将有助于我理解deeperOK。此外，两次使用相同的属性名does没有意义。给定的属性名只能有一个值。
const styles
在OP的功能组件中。它的initialiser对象文本已经在每个重新渲染器上计算过，因此应该已经是正确的@ᆼᆺᆼ 哇，你的用户名对
@
：）很有趣。是的，我意识到了这一点；我承认我并不真正理解OP想要什么，或者它是否可能。