Question

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

类似于document.getElementById（'myId'）。appendChild（）。

有React的方法吗？ ReactDOM.findDOMNode（this）.appendChild（）显然太简单了。

Answer 1

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

示例：

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>

动态添加JSX组件作为特定DOM元素的子元素

1 个答案: