动态追加 JSX 组件作为特定 DOM 元素的子元素答案

【问题标题】：Dynamically append JSX component as child of specific DOM element动态追加 JSX 组件作为特定 DOM 元素的子元素
【发布时间】：2019-01-05 01:05:55
【问题描述】：

问题是附加一个 React 组件（它的内容随着 props 的变化而变化）作为一个 DOM 元素的子元素，该元素已经由另一个组件（一个导入的组件，我不能直接修改）创建并且被选中通过 id 或类名。

非常类似于 document.getElementById('myId').appendChild()。

有没有一种 React 方法可以做到这一点？ ReactDOM.findDOMNode(this).appendChild() 显然太容易了。

【问题讨论】：

React 不是这样工作的。你必须避免在 React 中使用 jquery 模式。

标签： reactjs react-dom

【解决方案1】：

您可以在 React 中使用 Portal 来渲染到外部区域。在这种情况下，由于它是另一个 React 组件，因此您需要有办法知道它何时准备就绪，并且您需要目标 DOM 元素不被 React 重新渲染。

示例：

const Show = ({ count }) => (
  <div>{count}</div>
);

const InnerTarget = <div id="target"></div>;

class Target extends React.Component {
  componentDidMount() {
    this.props.ready();
  }

  render() {
    return InnerTarget;
  }
}

class Increment extends React.Component {
  state = {
    count: 0,
    ready: false
  };
  
  increment = () => this.setState(({ count }) => ({
    count: count + 1
  }));
  
  ready = () => this.setState({ ready: true });
  
  render() {
    const { count, ready } = this.state;
    
    return (
      <React.Fragment>
        <button onClick={this.increment}>Inc</button>
        <Target ready={this.ready} />
        {ready &&
        ReactDOM.createPortal(
          <Show count={count} />,
          document.querySelector('#target')
        )
        }
      </React.Fragment>
    );
  }
}

ReactDOM.render(
  <Increment />,
  app
);

#target {
  border: 1px solid red;
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="app"></div>

【讨论】：