如何在ReactJS中将JSX元素设置为没有返回的变量？

Question

我正在尝试分配一个变量，该变量将成为 ReactJS 中的 JSX 元素。

我想这样做：

const [useResultText, setResultText] = useState('');

const changeState = () => {

    const br = <br />

    setResultText('Hello' + br + 'world');

}

return (

    <div onClick={changeState}>{useResultText}</div>

);

有什么办法吗？

Answer 1

这很好用，因为 JSX 只表示某些类型的 JavaScript 对象。但是你必须正确定义它：const [useResultText, setResultText] = useState('');const changeState = () => {&nbsp; &nbsp; const br = <br />&nbsp; &nbsp; setResultText(<React.Fragment>Hello{br}world</React.Fragment>);}return (&nbsp; &nbsp; <div onClick={changeState}>{useResultText}</div>);您可能更喜欢 or 标记之类的东西，而不是片段，具体取决于您想要什么。pspan

Answer 2

你快到了。只需将状态设置为一个元素：import React from "react";import "./styles.css";export default function App() {&nbsp; const Elem = () => <div>Some stuff</div>;&nbsp; const [useResultText, setResultText] = React.useState(Elem);&nbsp; const changeState = () => {&nbsp; &nbsp; const br = <br />;&nbsp; &nbsp; setResultText(<div>Hello {br} World</div>);&nbsp; };&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; <div onClick={changeState}>{useResultText}</div>&nbsp; &nbsp; </div>&nbsp; );}CS：https://codesandbox.io/s/vibrant-wind-0il8p?file=/src/App.js