我有两个组成部分。 我想将第一个组件称为第二个组件。 我该怎么做？

Question

我有两个组成部分。 我想将第二个组件称为第一个组件

//first component

import React, { Component } from "react";

class Admin extends Component {
  render() {
    return (
      <div>
        <button>admin login</button>
      </div>
    );
  }
}
export default Admin;

...

//2nd component

import React, { Component } from "react";
import Admin from "./components/Admin";

class Main extends Component {
  render() {
    return (
      <div>
        <p>main page</p>

        <Admin />
      </div>
    );
  }
}
export default Main;

Answer 1

如果要在第一个组件中添加第二个组件，只需将其导入并将其放置在div中

import React, { Component } from "react";
import Main from "./components/Main"

    class Admin extends Component {
      render() {
        return (
          <div>
            <button>admin login</button>
            <Main/>
          </div>
        );
      }
    }
    export default Admin;

但是这样做，您将不得不从主要组件中删除Admin：

import React, { Component } from "react";


class Main extends Component {
  render() {
    return (
      <div>
        <p>main page</p>


      </div>
    );
  }
}
export default Main;

Answer 2

不知道我是否理解正确，但是由于您已经将第一个组件（）加载到了第二个组件中，因此我希望尝试将第二个组件调用到第一个组件中会由于无限导入问题而导致错误。

如果您只想在第一个组件中使用第二个组件，而在第二个组件中则不需要，那么布拉德·鲍尔的答案应该起作用。

Answer 3

看一下您提供给我们的代码，我们可以看到您正在调用Admin作为Main的子组件。

@Brad Ball给了您相反的效果，调用Main作为Admin的子组件。

如果要编写它们，则一个必须是父级，另一个必须是子级。

如果希望它们成为同级，则需要第三个组件作为两者的父级。

您能更好地解释您想做什么吗？