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

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 = {&nbsp; fontSize: "30px",&nbsp; get display() {&nbsp; &nbsp; return props.question && props.answer || props.punchline ? "block" : "none";&nbsp; },&nbsp; get color() {&nbsp; &nbsp; return !props.question && "#888888"&nbsp; }};请注意，如果某处某处更改了该props对象的内容，这只会产生所需的效果。如果这种情况永远不变，那么使用这种设置会让您有点不走运。