JSX 变量更新未反映在页面上

Question

我正在尝试将 JSX 变量添加到页面。我首先将其初始化为 null，因为它可能未被使用，但如果触发事件，我想将 JSX 添加到页面中。一旦用户完成文本输入并关闭模式窗口，处理程序就会执行。我可以成功地将他们的文本放到下面的这个处理函数中，但是由于某种原因，在模式关闭后，变量的 JSX 没有反映在当前页面上。let other = null;const handler = (text) => {    other = (        <li>            <span className="bold">Other: </span>            {text}}<span className="right">Price Unknown</span>        </li>    );};后来，我在我的 JSX 中简单地使用了这个变量<div className="other">    {other}</div>为什么这个更新在模态关闭后没有反映在页面上？我希望新添加的列表元素在哪里，它是空白的，好像 {other} 仍然指的是 null。这是需要重新渲染的页面的问题吗？

Answer 1

您需要调用处理函数并返回要呈现的 HTML。此外，如果您尝试更新变量并渲染它，请使用setState基于类的组件或[stateName, stateUpdateMethod] = useState(null)功能组件，然后用于stateUpdateMethod触发重新渲染。

import React from "react";

import ReactDOM from "react-dom";

const handler = (text) => <div>{text}</div> 

const App = () => handler("I am the text")

const rootElement = document.getElementById("root");

ReactDOM.render(

  <App />,

rootElement

);

Answer 2

您使用变量的方式不正确。

我在这里写了一个类似问题的答案。它显示了如何更新视图以及如何声明变量。

请检查那里的答案，如果您仍有疑问，请告诉我。

以下是那里答案的简短摘要：

如果您也想更新视图（这是您的情况），您应该在设置或更改值时使用 state 和 setState 方法。

例子：

class MyContainer extends Component {

    state = { testVarible: "this is a test" };

    onMove = () => {

        console.log(this.state.testVarible);

        this.setState({ testVarible: "new value" });

    }

}

话虽如此，我仍然觉得你让它变得复杂。

你应该做的是这个。

state = { text: 'some text' };

const handler = (text) => {

  this.setState({ text });

};

虽然 jsx 应该有这个：

<div className="other">

  <li>

    <span className="bold">Other: </span>{this.state.text}

    <span className="right">Price Unknown</span>

  </li>

</div>