第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

JSX 變量更新未反映在頁面上

JSX 變量更新未反映在頁面上

函數(shù)式編程 2022-05-26 15:25:45
我正在嘗試將 JSX 變量添加到頁面。我首先將其初始化為 null，因為它可能未被使用，但如果觸發(fā)事件，我想將 JSX 添加到頁面中。一旦用戶完成文本輸入并關(guān)閉模式窗口，處理程序就會執(zhí)行。我可以成功地將他們的文本放到下面的這個處理函數(shù)中，但是由于某種原因，在模式關(guān)閉后，變量的 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>為什么這個更新在模態(tài)關(guān)閉后沒有反映在頁面上？我希望新添加的列表元素在哪里，它是空白的，好像 {other} 仍然指的是 null。這是需要重新渲染的頁面的問題嗎？
查看完整描述

2 回答

?
青春有我

TA貢獻1784條經(jīng)驗 獲得超8個贊

您需要調(diào)用處理函數(shù)并返回要呈現(xiàn)的 HTML。此外，如果您嘗試更新變量并渲染它，請使用setState基于類的組件或[stateName, stateUpdateMethod] = useState(null)功能組件，然后用于stateUpdateMethod觸發(fā)重新渲染。


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

);


查看完整回答
反對 回復 2022-05-26
?
哆啦的時光機

TA貢獻1779條經(jīng)驗 獲得超6個贊

您使用變量的方式不正確。


我在這里寫了一個類似問題的答案。它顯示了如何更新視圖以及如何聲明變量。


請檢查那里的答案，如果您仍有疑問，請告訴我。


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


如果您也想更新視圖（這是您的情況），您應(yīng)該在設(shè)置或更改值時使用 state 和 setState 方法。


例子：


class MyContainer extends Component {


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


    onMove = () => {

        console.log(this.state.testVarible);

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

    }

}

話雖如此，我仍然覺得你讓它變得復雜。


你應(yīng)該做的是這個。


state = { text: 'some text' };

const handler = (text) => {

  this.setState({ text });

};

雖然 jsx 應(yīng)該有這個：


<div className="other">

  <li>

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

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

  </li>

</div>


查看完整回答
反對 回復 2022-05-26
  • 2 回答
  • 0 關(guān)注
  • 286 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號