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移出Main组件：

import React, { Component } from "react";


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


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

Answer 2

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

如果您只想在第二部分中使用第二部分，而在第二部分中则不需要第一部分，那么Brad Ball的答案应该可以解决。

Answer 3

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

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

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

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

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

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

3 个答案: