为什么调用对象时未应用对象中定义的三元条件

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="one_answers" 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

在某些情况下，我要问一个问题和答案，在某些情况下，我只是在爆炸而不是问答，有人可以告诉我是否有办法在内部设置三元条件对象，因此每次都将其应用于joke函数

Answer 1

我认为您真正想要的是根据props.jokes的属性有条件地渲染<p> Aragraphs，例如：

function Joke(props) {
  const styles = {
    fontSize: 30,
    color: !props.jokes.question && '#888'
  }
  return (
    <div>
      {props.jokes.question && <p className='qus' style={styles}>{props.jokes.question}</p>}
      {props.jokes.answer && <p className='ans' style={styles}>{props.jokes.answer}</p>}
      {props.jokes.punchline && <p className='punch' style={styles}>{props.jokes.punchline}</p>}
    </div>
  )
}
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>
  )
}
ReactDOM.render(<App />, document.getElementById('root'))
      

<script src="//cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

您可以使用" getter"函数：

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

请注意，这只会具有像您想要的效果一样，如果某物的某个地方会更改该props对象的内容。如果这种设置永远不会改变，那么您有点不幸。