我有一個函數，我想返回一些 HTML，但是當我調用該函數或記錄它時，它會返回未定義的變量： 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 }當我注銷時，componentDidUpdate 中的“el”變量是typeOf: Symbol(react.element)，el.innerHTML 是undefined。有沒有不同的方法來獲取 React 元素的innerHTML？我嘗試過使用 refs，但由于我對 React 還很陌生，我不確定我是否正確地執行了它，并且無法想到為什么它不起作用。任何幫助將非常感激！
2 回答
湖上湖
設置
TA貢獻2003條經驗 獲得超2個贊
ReactJS 不公開原始瀏覽器 DOM，而是有自己的 DOM 接口。
出于性能和安全原因，該HTMLElement接口的 ReactJS 等效項沒有innerHTML屬性（因為您不應該使用它?。?。
得到innerHTML（或者更確切地說outerHTML）：
如果您想要 ReactJS DOM 對象的 HTML 字符串表示形式，那么您需要使用renderToString. 請注意，這實際上會生成等價的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 ) );
}
設置innerHTML：
https://reactjs.org/docs/dom-elements.html
dangerouslySetInnerHTML是 React 的替代品，用于innerHTML在瀏覽器中使用 DOM。一般來說，從代碼設置 HTML 是有風險的，因為很容易無意中使用戶遭受跨站點腳本 (XSS) 攻擊。因此，你可以直接從 React 設置 HTML，但你必須輸入dangerouslySetInnerHTML并傳遞帶有鍵的對象__html，以提醒自己這是危險的。
交互式愛情
TA貢獻1712條經驗 獲得超3個贊
Refs提供了一種訪問 DOM 節點或在 render 方法中創建的 React 元素的方法。
在您的情況下，您應該ref向您的內容添加 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 關注
- 136 瀏覽
添加回答
舉報
0/150
提交
取消