ReactJS JSX 使用速记来执行多个执行

Question

我知道速记可以用来返回单个执行，但是有没有办法使速记返回多个执行？

以以下示例为例(工作)：

import React from 'react';
const CompName = () => {
const condition = true;
return (
<div>{condition && console.log("one")}</div>
)
}
export default CompName;

输出：1

---

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

import React from 'react';
const CompName = () => {
const condition = true;
return (
<div>{condition && (console.log("one") && console.log("two"))}</div>
)
}
export default CompName;

输出：1

预期输出：1 二

有人对我应该用来获得预期输出的语法有任何想法吗？

Answer 1

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

改变：

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

自：

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

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

我会把它留在这里，以防其他人遇到这种情况。

编辑：

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

原因是假设这两个执行是函数调用，并且第一个执行更改为返回true。这意味着第二次执行永远不会发生。

这意味着以后你可能会引入一个很难追踪的错误。

最终，当您需要执行多个执行时，最好使用以下方法：

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

如果引入错误，这在代码中变得更容易找到。

Answer 2

您可以使用逗号运算符

import React from 'react';
const CompName = () => {
const condition = true;
return (
<div>{condition && (console.log("one"), console.log("two"))}</div>
)
}
export default CompName;

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

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