在没有代码更改的情况下响应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>


    );

这段代码可以很好地反应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，期望在任何地方都有反应节点，而JSX本身就不再被接受了。这些错误一旦我附上了反应片段的元素，这真的是解决这个问题的唯一方法吗？

提前感谢！

Answer 1

是的，反应18确实做了一些改变，我不确定你的第二次发行，但你的第一次发行卡可以这样固定。

只需添加<>和</>反应片段作为单个子片段即可。

<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>