javascript - 将外部 HTML 添加到 React 组件不起作用

Question

基本上我想从外部脚本向 React 组件添加静态 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