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

您尝试做的不是在 React 中插入元素的正确方法，仍然为您的要求，请参考下面提到的代码

你的渲染函数应该是这样的

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

如果使用新的 React 语法（现在不推荐使用 Createclass），请使用

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