將外部HTML轉換爲反應組件不起作用

Question

基本上我想從外部腳本向反應組件添加靜態HTML。

所以我節省的this到窗口變量參考如下：

let { PropTypes } = React; 

export default class Body extends React.Component { 
    constructor(){ 
    super(); 
    let frmTrgt={}; 
    frmTrgt.refff=this; 
    console.log("tthis: ",this); 
    window.bdyRefrence=frmTrgt; 
    } 
    static defaultProps = { 
    items: [] 
    }; 

    static propTypes = { 
    items: PropTypes.array.isRequired 
    }; 

    render() { 
    return (
     <div className={styles.body}> 
     <h1 className={styles.header}>React Seed</h1> 
     <p>This is an example seed app, powered by React, ES6 &amp; webpack.</p> 
     <p>Here is some example data:</p> 
     <Menu items={this.props.items} /> 
     <div> 
      <h1>Dynamic Content</h1> 
      <div id="myDynamicContent"></div> 
     </div> 
     </div> 
    ); 
    } 
} 

，並在index.html的（外部腳本）我的腳本標籤我做喜歡以下：

function addPHtml() { 
     try { 
     window.bdyRefrence.refff.refs.formTarget.insertAdjacentHTML("<p id='mhere'>paragraph 2</p>"); 
     }catch (err){ 
     console.log("err: ",err); 
     } 
    } 

，但是當我打電話addPHtml它給以下錯誤：

err: TypeError: Cannot read property 'insertAdjacentHTML' of undefined 
    at addPHtml ((index):19) 
    at <anonymous>:1:1 

Answer 1

瓦在你試圖做的是不是正確的方式作出反應插入元素，還在爲您的要求，請參閱下文提到的代碼

渲染功能應該像

return(
    <div> 
    <div ref="formTarget"></div> 
    <h1 >React Seed</h1> 
    <p>This is an example seed app, powered by React, ES6 &amp; webpack.</p> 
    <p>Here is some example data:</p> 
    <div> 
     <h1>Dynamic Content</h1> 
     <div id="myDynamicContent"></div> 
    </div> 
    </div> 
) 

請檢查演示這裏Demo

如果使用新的陣營語法（Createclass現在已經過時）使用

window.refferedItem.refs.formTarget.getDOMNode().insertAdjacentHTML