React v18 在没有更改代码的情况下导致错误，不再接受 JSX？

Question

自 React 18 以来，我在呈现应用程序时遇到了一些错误，并且无法像看起来那样嵌套任何元素。例如，我的应用程序中有以下代码：

return (
        <Card>
            <div className={`flex flex-row justify-content-center align-items-center`}>
                {props.icon}
                <h2>{props.text}</h2>
            </div>
            <div className={"flex justify-content-center align-items-center"}>
                <Button onClick={() => props.onButtonClick()} className={"w-2"} label={props.buttonText}/>
            </div>
        </Card>


    );

此代码在 React 18 之前运行良好，现在从 18 版本开始出现以下错误：

同样，元素数组无法再被渲染，同样，以下代码在 React17 中运行良好：

  <DataTable metaKeySelection={false} selectionMode={"single"} onSelectionChange={e => {
                                setSelection(e.value)
                            }} selection={selection} stripedRows={true} showGridlines={true} size={"small"}
                                       value={artifacts}>
                                {colModels}
                            </DataTable>

现在从 React18 开始出现以下问题：

在我看来，对于 v18，React 期望无处不在的 React 节点和 JSX 本身不再被接受。一旦我用 React 片段封装所述元素，这些错误就会消失，这真的是解决这个问题的唯一方法吗？

提前致谢！

Answer 1

是的，React 18 确实做了一些改变，我不确定你的第二个问题，但你的第一个卡问题可以这样解决...

只需添加 <> 和 </> React Fragment 作为单个子项。

<Card>
   <>
            <div className={`flex flex-row justify-content-center align-items-center`}>
                {props.icon}
                <h2>{props.text}</h2>
            </div>
            <div className={"flex justify-content-center align-items-center"}>
                <Button onClick={() => props.onButtonClick()} className={"w-2"} label={props.buttonText}/>
            </div>
  </>
</Card>

React v18 在没有更改代码的情况下导致错误，不再接受 JSX？

React v18 causes error without code changes, JSX no longer accepted?

reactjs

typescript

tsx

primereact

react-18