多次使用React-Dom渲染

Question

是否可以在react spa中，尤其是在嵌套的子组件中多次使用react-dom渲染？ 例如：

index.jsx：

import React from 'react';
import { render } from 'react-dom';
import sampleComponent from './sampleComponent';

render(<SampleComponent />, document.getElementById('app'));

sampleComponent.jsx：

import React from 'react';
import { render } from 'react-dom';

const SampleComponent = () => (
  <div>
    <h1>hello world</h1>
    <div id="foo" />
  </div>
);

export default SampleComponent;


render(<h1>it's me again</h1>, document.getElementById('foo'));

Answer 1

多次使用渲染是一种复杂的方法。 不用了

您已经创建了一个有效的组件。 只需将其包装成另一个，再使用一次即可。 例如：

const SampleComponent = () => (
  <div>
    <h1>hello world</h1>
    <div id="foo" />
  </div>
);

const WrapperComponent = () => (
  <div>
    <SampleComponent />
    <SampleComponent />
  </div>
);

export default WrapperComponent;