为什么我们不能使用If-Else以及三元运算符如何提供帮助 (Why We Can’t Use If-Else and How the Ternary Operator can Help)

One of the great strengths of the React.js framework is its modular design philosophy. When we break our page into modular components, we also gain a lot of control over how, where, when, and whether a component is rendered. The latter question, the “whether,” seems especially important in an interactive web app. Without it, we wouldn’t have things like modals, dropdown lists, and accordion menus. These are all examples of conditional rendering.

React.js框架的一大优势是其模块化的设计理念。 当我们将页面分为模块化组件时，我们还获得了如何呈现组件，如何呈现，何时呈现以及是否呈现组件的大量控制权。 在交互式Web应用程序中，后一个问题“是否”显得尤为重要。 没有它，我们将不会有模态，下拉列表和手风琴菜单之类的东西。 这些都是条件渲染的示例。

The word “conditional” might tip us off here that we’re going to be dealing with, well, conditionals (i.e., if, else if, else). If some condition is met, render one component, else (if the condition isn’t met), render another one. While, logically, this is true, syntactically, it won’t be so simple. Here’s an example:

“有条件的”一词可能会在这里提示我们，我们将要处理有条件的(即，如果，否则，如果不是)。 如果满足某些条件，则渲染一个组件，否则(如果不满足条件)，则渲染另一个组件。 虽然从逻辑上讲这是正确的，但从语法上讲，这并不是那么简单。 这是一个例子：

Here we have a template to create a flashcard for studying. We want to start with a term, and render the definition after we click on the card. The FlashCard component also has a state of “clicked” initialized to false. This state is how we can keep track of our clicks.

这里我们有一个模板来创建学习卡片。 我们想从一个词开始，然后在单击卡片后渲染定义。 FlashCard组件还具有初始化为false的“单击”状态。 在这种状态下，我们可以跟踪点击次数。

NOTE: In a full-size React app, you might choose to keep track of your clicks via object mutation (i.e., adding a “clicked” key to the object when storing it in state in a parent component), or via props from a parent component. I’m using state in this example to limit our scope to a single component/file.

注意：在全尺寸的React应用中，您可以选择通过对象突变(例如，将对象存储在父组件中的状态时向对象添加“被单击”键)或通过来自道具的道具来跟踪点击。父组件。 在此示例中，我使用状态将范围限制为单个组件/文件。

React uses JSX, which allows us to write our code using HTML-like syntax, making it easy to visualize how it will render. The above code looks like we’re using an HTML div tag. JSX gives us that HTML feel, while also allowing us to implement JavaScript inside those curly braces. This is presumably where our conditional logic would belong. So, what if we just use a standard conditional statement, like so:

React使用JSX，这使我们能够使用类似HTML的语法编写代码，从而使可视化呈现方式变得容易。 上面的代码看起来像我们正在使用HTML div标签。 JSX给我们带来HTML的感觉，同时也使我们能够在这些花括号内实现JavaScript。 这大概是我们的条件逻辑所属的地方。 因此，如果我们仅使用标准条件语句，如下所示：

The weird syntax highlighting might tip us off, but this code won’t run. The syntax seems valid enough, HTML elements aside. But we’ll get a message saying “unexpected token,” pointing us to our if statement.

奇怪的语法高亮显示可能会提示我们，但是此代码无法运行。 语法似乎足够有效，除了HTML元素。 但是我们会收到一条消息，提示“意外令牌”，将我们指向if语句。

You might know all this already. The React documentation prepares us for this outcome. Per the docs:

您可能已经知道所有这一切。 React文档为我们为实现这一结果做好了准备。 根据文档 ：

if-else statements don’t work inside JSX. This is because JSX is just syntactic sugar for function calls and object construction. Take this basic example:

if-else语句在JSX中不起作用。 这是因为JSX只是函数调用和对象构造的语法糖。 举个基本的例子：

// This JSX:ReactDOM.render(<div id="msg">Hello World!</div>, mountNode);// Is transformed to this JS:ReactDOM.render(React.createElement("div", {id:"msg"}, "Hello World!"), mountNode);

This means that if statements don’t fit in…

这意味着if语句不适合…

This is a great start. JSX is syntactic sugar. It is HTML-like, but it isn’t HTML. When we used those div tags, we were really just calling React’s createElement function. Unfortunately, if you’re relatively new to JavaScript, as I am, this might not do anything to clear up the question of why if statements “don’t fit in.” Especially after we find out that this isn’t the end of conditional rendering. All we have to do is refactor a little bit.

这是一个很好的开始。 JSX是语法糖。 它类似于 HTML，但不是HTML。 当我们使用这些div标签时，我们实际上只是在调用React的createElement函数。 不幸的是，如果像我这样对JavaScript相对较新的人，这可能无法解决为什么 if语句“不适合”的问题。 特别是在我们发现这不是条件渲染的结束之后。 我们要做的只是重构一点。

This code compiles no problem. What gives? Why can we use the ternary operator and not an if-else statement? Isn’t the ternary operator just an if-else statement itself? The answer, apparently, is: sort of, but not really!

这段代码编译没问题。 是什么赋予了？ 为什么我们可以使用三元运算符而不是if-else语句？ 三元运算符本身不是if-else语句吗？ 答案显然是：有点，但不是真的！

We got more of a clue from those React docs than it seems on the first read. “If statements don’t fit…”

从那些React文档中，我们获得的线索比一读时要多。 “如果陈述不适合……”

陈述与表达 (Statements vs. Expressions)

As it turns out, while the ternary (or conditional) operator does help us achieve the same functionality as if-else statements with fewer lines of code, there is an important distinction between the two. The standard if-else is a statement, whereas the ternary operator is an expression.

事实证明，尽管三元运算符(或条件运算符)确实帮助我们实现了与if-else语句具有相同功能的功能，但代码行较少，但是两者之间存在重要区别。 标准的if-else是一个语句 ，而三元运算符是一个表达式 。

An expression is any unit of code that evaluates to a value. 2 + 2 (arithmetic expression) is an expression. So is ‘hello world’ (string expression), 3 < 5 (logical expression), and sum = 4 (assignment expression). Since expressions evaluate to a value, we can use them anywhere a value is expected. This includes as an argument for a function invocation.

表达式是求值的任何代码单元。 2 + 2 (算术表达式)是一个表达式。 'hello world' (字符串表达式)， 3 < 5 (逻辑表达式)和sum = 4 (赋值表达式)也是如此。 由于表达式求值，因此我们可以在需要值的任何地方使用它们。 这包括作为函数调用的参数。

By contrast, statements are instructions. They may contain expressions, but they are not required to return a value. A typical example might be variable declaration. If you type let sum = 4 into your browser's console, you get back "undefined." This is in contrast to our assignment expression sum = 4 which will return "4." Really, let sum = 4 is just telling the console "create a variable." It isn't an expression to be evaluated; it's an instruction to be executed. Because we aren't guaranteed a return value, we can't use statements in place of values. Thus we can't put statements in our function arguments.

相反，陈述是指令。 它们可以包含表达式，但是不需要返回值。 一个典型的例子可能是变量声明。 如果在浏览器的控制台中键入let sum = 4 ，则会返回“ undefined”。 这与我们的赋值表达式sum = 4 ，后者将返回“ 4”。 实际上， let sum = 4只是告诉控制台“创建变量”。 它不是要评估的表达式； 这是一条要执行的指令。 因为我们不能保证返回值，所以不能使用语句代替值。 因此，我们不能将语句放入函数参数中。

结论 (Conclusion)

So, JSX is syntactic sugar. When we write JSX, it gets changed into a standard JS function invocation. This limits us from using statements in our JSX (as an argument for the createElement function). However, we don’t have to use the ternary operator. We can handle any expression. This includes function calls and other logical operators. If we really wanted to use an if-else statement, all we’d have to do is wrap it in a function and pass the function as an argument. Also, the ternary vs. if-else debate assumes we are deciding between two elements to display. If we were only interested in rendering or not rendering a single element, we might use the && logical operator. You can find a fairly exhaustive list of alternatives for conditional rendering here.

因此，JSX是语法糖。 当我们编写JSX时，它变成了标准的JS函数调用。 这限制了我们不能在JSX中使用语句(作为createElement函数的参数)。 但是，我们不必使用三元运算符。 我们可以处理任何表达式。 这包括函数调用和其他逻辑运算符。 如果我们真的想使用if-else语句，我们所要做的就是将其包装在一个函数中并将该函数作为参数传递。 同样，三元与非其他辩论假设我们正在决定要显示的两个元素之间。 如果仅对呈现单个元素感兴趣，或者不呈现单个元素，则可以使用&&逻辑运算符。 您可以在此处找到相当详尽的条件渲染替代列表。