时间戳

首页 > 解决方案 > 如何在反应片段中进行多个条件渲染？

javascript - 如何在反应片段中进行多个条件渲染？

问题描述

我是 Reactjs 的新手，从今天下午开始，我一直被这个错误困扰，我仍然不知道我是如何不断收到错误的，'}' expected.例如JSX expressions must have one parent element.

{
      title: formatMessage({
        id: 'accounts.table.options',
      }),
      fixed: 'right',
render: (_, record) => ( 
        <>
        {
                    
              (record?.is_activate && record?.status !== "initiating") && 
                <a onClick={() => activateAdAccount(record)}>
                  Edit
                </a>

              (record?.is_activate && record?.status !== "initiating" && record?.status !== "error" && record?.status !== "processing") &&
              <>
                <Divider type="vertical" />
                <a onClick={() => activateAdAccount(record)}>
                  Subscription Warning
                </a>
              </>
        }
        </>
      ),
},

我尝试用 react.Fragment 包装语句，但仍然遇到一些随机语法错误。重写代码片段的首选方法是什么？

标签： javascriptreactjssyntax

解决方案

{
      title: formatMessage({
        id: 'accounts.table.options',
      }),
      fixed: 'right',
render: (_, record) => ( 
        <>
        {record?.is_activate && record?.status !== 'initiating' && (
          <a onClick={() => activateAdAccount(record)}>Edit</a>
        )}
        {record?.is_activate &&
          record?.status !== 'initiating' &&
          record?.status !== 'error' &&
          record?.status !== 'processing' && (
            <>
              <Divider type="vertical" />
              <a onClick={() => activateAdAccount(record)}>
                Subscription Warning
              </a>
            </>
          )}
      </>
      ),
},

您需要将两个 js 代码块（即第一个条件和第二个条件）放在单独的 {}（大括号）中。原因：React JSX 中花括号内的多个函数调用

推荐阅读