javascript - 在渲染中响应返回

Question

我正在对现有代码库进行更改。
下面是隐藏了详细信息的代码片段:

class Config extends Component {
  .
  .
  .
  render() {
    const { onSubmit, isConfigValid } = this.props;

    return (
      <Form>
        .
        .
        .
      </Form>
    );
  }
}

我需要更改<Form>组件到<Dialog>组件和该组件的实现说明给出了一个示例用法:

render(
  <Dialog>
    .
    .
    .  
  </Dialog>, document.getElementById('root')
); 

如何将其合并到渲染中存在返回的当前格式中？
我尝试简单地替换 <Form>标签为 <Dialog>标签，但我不知道将 document.getElementById('root') 放在哪里如果没有这个，对话框将出现在错误的位置。

感谢任何帮助!

Answer 1

如您所见，您使用 ReactDOM.render(...) 来将顶级组件渲染到 DOM 中。在这里，它是Config。

class Config extends React.Component {
  render() {
    return (
      //<Form>, Instead use <Dialog> here
      <Dialog>
        <h1>Hello</h1>
        <p>Foo</p>
      </Dialog>
      //</Form>
    );
  }
}

// Instead of using in the same file, probably you will import it:
// import Dialog from "./where_is_this_Dialog";
const Dialog = (props) => (
  <div>{props.children}</div>
);

ReactDOM.render(
  <Config />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>