将外部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