使用条件时 React class 组件中的解析错误

Question

我收到这个 Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? 错误，而我的组件中的所有内容都已正确设置。我仔细检查了所有内容，似乎没有任何问题。折叠组件在错误消息中突出显示。我做错了什么或者什么可能导致错误？

有错误的代码部分：

return (
                    <div>
                    {
                     isAuthenticatedAndIsCoach ?
                        <h2>Lisa</h2>
                        <Collapse defaultActiveKey={['0']} onChange={callback} style={{ marginBottom: '10px', borderRadius: '10px'}}>
                            <Panel header="Valige treeningu asukoht kaardilt" key="1">
                                <Map />
                            </Panel>
                        </Collapse>
                        <CustomForm
                            requestType="post"
                            trainingID={null}
                            btnText="Loo treening"/>
                      : <span>Teil puudub vastav luba postitamiseks</span>
                      }
                    </div>
                )

Answer 1

您应该用 React.Fragment（或 <>）包装由三元条件返回的 JSX，因为每次执行渲染函数时 React 都期望一个元素。

https://en.reactjs.org/docs/fragments.html

return (
  <div>
    {isAuthenticatedAndIsCoach ? (
      <>
        <h2>Lisa</h2>
        <Collapse
          defaultActiveKey={["0"]}
          onChange={callback}
          style={{ marginBottom: "10px", borderRadius: "10px" }}
        >
          <Panel header="Valige treeningu asukoht kaardilt" key="1">
            <Map />
          </Panel>
        </Collapse>
        <CustomForm
          requestType="post"
          trainingID={null}
          btnText="Loo treening"
        />
      </>
    ) : (
      <span>Teil puudub vastav luba postitamiseks</span>
    )}
  </div>
);

使用条件时 React class 组件中的解析错误

Parsing error in React class Component while using condition

xml-parsing

reactjs