reactjs 无法在React Js中使用三元运算符设置颜色？[已关闭]

zphenhs4 于 2023-03-12 发布在 React

关注(0)|答案(2)|浏览(108)

**已关闭。**此问题为not reproducible or was caused by typos。当前不接受答案。

这个问题是由打字错误或无法再重现的问题引起的。虽然类似的问题在这里可能是on-topic，但这个问题的解决方式不太可能帮助未来的读者。
7小时前关闭。
Improve this question
为什么我得到这个错误？没有颜色属性它的工作。是不是不允许backgroundColor作为一个条件？如果我直接设置颜色为红色它也工作。但与三元运算符是不工作。

const Square = ({colorVal}) => {
  return (
    <section className='square' 
            style={{
                backgroundColor:colorVal,
                color: backgroundColor === 'black' ? 'white': 'black'
                }}
    >
        <h3>{colorVal ? colorVal : 'Empty'}</h3>
    </section>
  )
}

错误：

src/Square.js
  Line 9:24:  'backgroundColor' is not defined  no-undef

Search for the keywords to learn more about each error.
ERROR in [eslint] 
src/Square.js
  Line 9:24:  'backgroundColor' is not defined  no-undef

Search for the keywords to learn more about each error.

webpack compiled with 1 error
,,,

reactjs

来源：https://stackoverflow.com/questions/75704450/cant-set-color-with-ternary-operator-in-react-js

2条答案

按热度按时间

km0tfn4u1#

我认为代码应更改为：

const Square = ({colorVal}) => {
  return (
    <section className='square' 
      style={{
          backgroundColor: colorVal,
          color: colorVal === 'black' ? 'white': 'black'
      }}
    >
      <h3>{colorVal ? colorVal : 'Empty'}</h3>
    </section>
  )
}

您尝试检查未定义的backgroundColor。请将其更改为colorVal。

赞(0）回复(0）举报 2023-03-12

xzv2uavs2#

样式={{背景颜色：颜色值，颜色：颜色值===“黑色”？“白色”：'黑色' }}

赞(0）回复(0）举报 2023-03-12