JSX 中的多行 JavaScript？

编程问答 2022-05-26

问题描述

是否可以在 JSX 中编写多行 js 代码？

return (
      <b>{
      const a = props.users.find((user) => user.id === post.userId)
      console.log(a) // I want to console.log
      return a
      }</b>
);

解决方法

如果你想做多行 JavaScript 代码，你可以用 IIFE 包裹你的 JS 代码，例如：

  <>
    {(() => {
      const a = [1,2,3].find((el) => el === 2)
      // as much code as you want ...
      // ...
      // ...
      console.log(a)
    })()}
  </>

以防万一你不知道，<> & </> 被称为 React 片段，你可以使用任何你想要的有效 JSX 元素，例如，你可以使用 <div> 、<b>、<p> 或类似的东西。

jsxjsxjsxreactjsreactjsreactjsreactjstslinttypescripttypescripttypescript