如何在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 = () => {

    const br = <br />

    setResultText(<React.Fragment>Hello{br}world</React.Fragment>);

}

return (

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

);

您可能更喜欢 or 标记之类的东西，而不是片段，具体取决于您想要什么。pspan

Answer 2

你快到了。只需将状态设置为一个元素：

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>

  );

}

CS：https://codesandbox.io/s/vibrant-wind-0il8p?file=/src/App.js