我有一個(gè)函數(shù)，我想返回一些 HTML，但是當(dāng)我調(diào)用該函數(shù)或記錄它時(shí)，它會(huì)返回未定義的變量： contentForRender = () => { const el = ( <div><span>Lorem Ipsum</span></div> ); return el; } componentDidUpdate(prevProps, prevState, prevContext) { const el = this.contentForRender(); console.log('el', el); console.log('el_inner', el.innerHTML); // do something with el.innerHTML }當(dāng)我注銷時(shí)，componentDidUpdate 中的“el”變量是typeOf: Symbol(react.element)，el.innerHTML 是undefined。有沒有不同的方法來獲取 React 元素的innerHTML？我嘗試過使用 refs，但由于我對(duì) React 還很陌生，我不確定我是否正確地執(zhí)行了它，并且無法想到為什么它不起作用。任何幫助將非常感激！
2 回答
湖上湖
設(shè)置
TA貢獻(xiàn)2003條經(jīng)驗(yàn) 獲得超2個(gè)贊
ReactJS 不公開原始瀏覽器 DOM，而是有自己的 DOM 接口。
出于性能和安全原因，該HTMLElement接口的 ReactJS 等效項(xiàng)沒有innerHTML屬性（因?yàn)槟粦?yīng)該使用它?。?/p>
得到innerHTML（或者更確切地說outerHTML）：
如果您想要 ReactJS DOM 對(duì)象的 HTML 字符串表示形式，那么您需要使用renderToString. 請(qǐng)注意，這實(shí)際上會(huì)生成等價(jià)的outerHTML，而不是innerHTML：
import { renderToString } from 'react-dom/server'
componentDidUpdate(prevProps, prevState, prevContext) {
const el = this.contentForRender();
console.log('el', el);
console.log('el_inner', renderToString( el ) );
}
設(shè)置innerHTML：
https://reactjs.org/docs/dom-elements.html
dangerouslySetInnerHTML是 React 的替代品，用于innerHTML在瀏覽器中使用 DOM。一般來說，從代碼設(shè)置 HTML 是有風(fēng)險(xiǎn)的，因?yàn)楹苋菀谉o意中使用戶遭受跨站點(diǎn)腳本 (XSS) 攻擊。因此，你可以直接從 React 設(shè)置 HTML，但你必須輸入dangerouslySetInnerHTML并傳遞帶有鍵的對(duì)象__html，以提醒自己這是危險(xiǎn)的。
交互式愛情
TA貢獻(xiàn)1712條經(jīng)驗(yàn) 獲得超3個(gè)贊
Refs提供了一種訪問 DOM 節(jié)點(diǎn)或在 render 方法中創(chuàng)建的 React 元素的方法。
在您的情況下，您應(yīng)該ref向您的內(nèi)容添加 prop 并在以下位置引用它componentDidUpdate：
constructor(props) {
? super(props);
? this.contentRef = React.createRef();
}
componentDidUpdate(prevProps, prevState, prevContext) {
? const el = this.contentRef.current;
? console.log('el', el);
? console.log('el_inner', el.innerHTML);
? // do something with el.innerHTML
}
render() {
? return <div ref={this.contentRef}><span>Lorem Ipsum</span></div>;
}
- 2 回答
- 0 關(guān)注
- 132 瀏覽
添加回答
舉報(bào)
0/150
提交
取消