Javascript 如何在ReactJS中将JSX元素设置为变量而不返回？

我试图分配一个变量，它将是ReactJS中的JSX元素

我想这样做：

const [useResultText, setResultText] = useState('');
const changeState = () => {
    const br = <br />
    setResultText('Hello' + br + 'world');
}

return (
    <div onClick={changeState}>{useResultText}</div>
);

const[useResultText，setResultText]=useState（“”）；
constchangestate=（）=>{
常数br=

setResultText（'Hello'+br+'world'）；
}
返回(
{useResultText}
);

---

有什么方法可以做到这一点吗？

这很好，因为JSX只表示某些类型的JavaScript对象。但您必须正确定义它：

const [useResultText, setResultText] = useState('');
const changeState = () => {
    const br = <br />
    setResultText(<React.Fragment>Hello{br}world</React.Fragment>);
}

return (
    <div onClick={changeState}>{useResultText}</div>
);

const[useResultText，setResultText]=useState（“”）；
constchangestate=（）=>{
常数br=

setResultText（Hello{br}world）；
}
返回(
{useResultText}
);

---

您可能更喜欢

p

或

span

标记而不是片段，这完全取决于您想要什么。

您就快到了。只需将状态设置为元素：

import React from "react";
import "./styles.css";

export default function App() {
  const Elem = () => <div>Some stuff</div>;
  const [useResultText, setResultText] = React.useState(Elem);
  const changeState = () => {
    const br = <br />;
    setResultText(<div>Hello {br} World</div>);
  };

  return (
    <div className="App">
      <div onClick={changeState}>{useResultText}</div>
    </div>
  );
}

从“React”导入React；
导入“/styles.css”；
导出默认函数App（）{
常量=（）=>一些东西；
const[UsersUltText，setResultText]=React.useState（Elem）；
constchangestate=（）=>{
常数br=
；
setResultText（Hello{br}World）；
};
返回(
{useResultText}
);
}

政务司司长：