JSX 中的多行 JavaScript？

Question

是否可以在 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>
);

Answer 1

如果你想做多行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>、@ 987654327@ 或类似名称。