我有兩個組成部分。 我想將第一個組件稱為第二個組件。 我該怎么做？

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的子組件。

如果要編寫它們，則一個必須是父級，另一個必須是子級。

如果希望它們成為同級，則需要第三個組件作為兩者的父級。

您能更好地解釋您想做什么嗎？