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>

在渲染中反应返回

1 个答案: