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>或<p>类似的东西。