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

Question

我处于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在某些情况下，我正在发送带有问题和答案的对象，在某些情况下，我只是在发送紧急通知而不是提问和答案，有人可以告诉我是否存在一种在对象内部设置三元条件的方法，每当我将props对象作为参数传递给Joke函数时，都会被应用

Answer 1

您可以使用“获取器”功能：

const styles = {

  fontSize: "30px",

  get display() {

    return props.question && props.answer || props.punchline ? "block" : "none";

  },

  get color() {

    return !props.question && "#888888"

  }

};

请注意，如果某处某处更改了该props对象的内容，这只会产生所需的效果。如果这种情况永远不变，那么使用这种设置会让您有点不走运。