Javascript ReactJSJSX使用速记来执行多个执行

我知道速记可以用来返回一次执行，但是有没有办法让速记返回多次执行

以以下示例（工作模式）为例：

从“React”导入React；
常数CompName=（）=>{
常数条件=真；
返回(
{condition&&console.log（“一”）}
)
}
导出默认CompName；

输出： 一个

---

现在，如果条件为真，我想执行两个控制台日志：

import React from 'react';

const CompName = () => {
  const condition = true;
  return (
    <div>{condition && (console.log("one") && console.log("two"))}</div>
  )
}

export default CompName;

从“React”导入React；
常数CompName=（）=>{
常数条件=真；
返回(
{条件&&（console.log（“一”）&&console.log（“两”）}
)
}
导出默认CompName；

输出： 一个

预期输出： 一 两个

---

有人知道我应该使用什么语法来获得预期的输出吗？

我想我已经成功了。我需要使用OR而不是AND

更改：

 condition && (console.log("one") && console.log("two"))

致：

我相信这是因为速记是在寻找真/假返回值。函数调用不返回任何内容是错误的，因此第二次执行永远不会发生

我把这个放在这里，以防有人碰到

编辑：

尽管上述方法有效，但速记永远不应以这种方式使用

原因是假设这两次执行是函数调用，第一次执行更改为返回

true

。这意味着第二次执行将永远不会发生

这意味着以后你可以引入一个很难追踪的bug

最终，当需要执行多个执行时，最好使用以下命令：

if(condition){console.log("foo"); console.log("bar");}

---

如果引入了bug，那么在代码中可以更容易地找到它。

我想我已经让它工作了。我需要使用OR而不是AND

更改：

 condition && (console.log("one") && console.log("two"))

致：

我相信这是因为速记是在寻找真/假返回值。函数调用不返回任何内容是错误的，因此第二次执行永远不会发生

我把这个放在这里，以防有人碰到

编辑：

尽管上述方法有效，但速记永远不应以这种方式使用

原因是假设这两次执行是函数调用，第一次执行更改为返回

true

。这意味着第二次执行将永远不会发生

这意味着以后你可以引入一个很难追踪的bug

最终，当需要执行多个执行时，最好使用以下命令：

if(condition){console.log("foo"); console.log("bar");}

---

如果引入了错误，那么在代码中就更容易找到它。

您可以使用逗号运算符

import React from 'react';

const CompName = () => {
  const condition = true;
  return (
    <div>{condition && (console.log("one"), console.log("two"))}</div>
  )
}

export default CompName;

从“React”导入React；
常数CompName=（）=>{
常数条件=真；
返回(
{condition&（console.log（“一”），console.log（“两”）}
)
}
导出默认CompName；

ReactDOM.render（，根）
函数CompName（）{
常数条件=真；
返回(
{condition&（console.log（“一”），console.log（“两”）}
)
}

---

您可以使用逗号运算符

import React from 'react';

const CompName = () => {
  const condition = true;
  return (
    <div>{condition && (console.log("one"), console.log("two"))}</div>
  )
}

export default CompName;

从“React”导入React；
常数CompName=（）=>{
常数条件=真；
返回(
{condition&（console.log（“一”），console.log（“两”）}
)
}
导出默认CompName；

ReactDOM.render（，根）
函数CompName（）{
常数条件=真；
返回(
{condition&（console.log（“一”），console.log（“两”）}
)
}

仅当第一个函数的返回为falsy时，此操作才有效。如果您试图将此应用于其他类型的函数调用，则可能无法预测。我强烈建议你不要使用这种模式。你实际上指的是所谓的“短路评估”（你可以阅读）。@Brianthonpson我刚刚和我的导师讨论过这个问题，我100%同意。我会更新答案，告诉你什么时候应该只使用这样的速记，应该用什么来代替。只有在第一个函数返回错误的情况下，这才有效。如果您试图将此应用于其他类型的函数调用，则可能无法预测。我强烈建议你不要使用这种模式。你实际上指的是所谓的“短路评估”（你可以阅读）。@Brianthonpson我刚刚和我的导师讨论过这个问题，我100%同意。我会更新答案，告诉你什么时候应该只使用这样的速记，应该用什么来代替。我之前已经试过了，但它对我不起作用。它加载时有一个错误。@FiddleFreak我添加了一个react示例我之前已经尝试过了，但它对我不起作用。它加载时出错。@FiddleFreak我添加了一个react示例