ReactJs 中的 AND 运算符

Question

在使用 AND 运算符计算第 6 行中的表达式时，

1. export default function App() {
2.  var isDone = false;
3.  const strikethrough = { textDecoration: "line-through" };
4.  return (
5.    <div className="App">
6.      <h1 style={isDone && strikethrough}>Hello CodeSandbox</h1>
7.    </div>
8.   );
9. }

当isDone = false时，我收到一个错误

'The style prop expects a mapping from style properties to values, not a string. For example, style={‌{marginRight: spacing + 'em'}} when using JSX.

isDone = true 时一切正常。

null 无法正常工作，为了检查这一点，我使用了以下内容

<h1 style={}>Hello CodeSandbox</h1>

这给出了一个错误 'JSX attributes must only be assigned a non-empty expression'

我正在通过在线课程学习 ReactJs。这里发生了什么？

Answer 1

尝试控制台记录您的情况。

你应该有这个代码：

<h1 style={isDone ? strikethrough : undefined}>

或

<h1 style={isDone ? strikethrough : {}}>

const isDone = true
const strikethrough = 'yes' // or { textDecoration: "line-through" }

console.log(isDone && strikethrough) // return 'yes'

VS

const isDone = false
const strikethrough = 'yes'

console.log(isDone && strikethrough) // return boolean false

问题是您的 style 道具不接受布尔值。

更多。

如果您使用 typescript，您可以检查 h1 标签的 props。

有个className?: string;是意思string or nothing.

所以，你不能从 isDone && strikethrough 传递布尔值（return false）。

Answer 2

正如您已经知道的那样，您不能分配非空表达式。所以你需要做类似

的事情

<h1 style={isDone ? strikethrough : {}}>Hello CodeSandbox</h1>

为了有默认样式。

ReactJs 中的 AND 运算符

AND operator in ReactJs

and-operator

reactjs