Javascript 我有两个部分。我想把第一个组件称为第二个组件。我怎么做?

Javascript 我有两个部分。我想把第一个组件称为第二个组件。我怎么做?,javascript,reactjs,Javascript,Reactjs,我有两个部分。我想把第二个组件称为第一个组件 //first component import React, { Component } from "react"; class Admin extends Component { render() { return ( <div> <button>admin login</button> </div> ); } } export d

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

//first component

import React, { Component } from "react";

class Admin extends Component {
  render() {
    return (
      <div>
        <button>admin login</button>
      </div>
    );
  }
}
export default Admin;
//第一个组件
从“React”导入React,{Component};
类管理扩展组件{
render(){
返回(
管理员登录
);
}
}
导出默认管理员;

//第二个组件
从“React”导入React,{Component};
从“/components/Admin”导入管理员;
类主扩展组件{
render(){
返回(
主页

); } } 导出默认主;
如果您希望在第一个组件中包含第二个组件,只需导入它并将其放置在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;
import React,{Component}来自“React”;
从“/components/Main”导入Main
类管理扩展组件{
render(){
返回(
管理员登录
);
}
}
导出默认管理员;
但要做到这一点,您必须将Admin从主组件中删除:

import React, { Component } from "react";


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


      </div>
    );
  }
}
export default Main;
import React,{Component}来自“React”;
类主扩展组件{
render(){
返回(
主页

); } } 导出默认主;
如果您希望在第一个组件中包含第二个组件,只需导入它并将其放置在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;
import React,{Component}来自“React”;
从“/components/Main”导入Main
类管理扩展组件{
render(){
返回(
管理员登录
);
}
}
导出默认管理员;
但要做到这一点,您必须将Admin从主组件中删除:

import React, { Component } from "react";


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


      </div>
    );
  }
}
export default Main;
import React,{Component}来自“React”;
类主扩展组件{
render(){
返回(
主页

); } } 导出默认主;
我不确定我是否正确理解了这一点,但由于您已经将第一个组件()加载到第二个组件中,我希望尝试将第二个组件调用到第一个组件中会由于无限导入问题而导致错误


如果您只希望在第一个组件中包含第二个组件,而不希望在第二个组件中包含第一个组件,那么Brad Ball的答案应该会起作用。

不确定我是否正确理解这一点,但由于您已经将第一个组件()加载到第二个组件中,我希望尝试将第二个调用到第一个会由于无限导入问题而导致错误


如果您只希望在第一个组件中包含第二个组件,而不希望在第二个组件中包含第一个组件,那么Brad Ball的答案应该是可行的。

看看您向我们展示的代码,我们可以看到您正在将Admin作为Main的子组件调用

@Brad Ball给出了相反的结果,将Main作为Admin的子组件调用

如果你想组合它们,一个必须是父对象,另一个必须是子对象

如果希望它们是兄弟,则需要第三个组件作为两者的父级


你能更好地解释你想做什么吗

看看您向我们展示的代码,我们可以看到您正在调用Admin作为Main的子组件

@Brad Ball给出了相反的结果,将Main作为Admin的子组件调用

如果你想组合它们,一个必须是父对象,另一个必须是子对象

如果希望它们是兄弟,则需要第三个组件作为两者的父级


你能更好地解释你想做什么吗

我只是想要一个主页,我想在其中添加学生,管理员按钮(按钮的意思是:竞争形式按按钮)…但问题是,学生和管理员是不同的组成部分,所以我如何才能添加这些组成部分在主页主是家长和管理员学生和按钮是兄弟姐妹,孩子的主要。在主组件文件中,导入Admin、Student和Button,然后在render方法中调用它们。请检查React Doc页面的Composing Components部分。我只需要一个主页面,在其中添加student、admin按钮(按钮的意思是:按按钮竞争表单)…但问题是,学生和管理员是不同的组件,所以我如何才能在主页中添加这些组件。因此,main是父级,admin学生和按钮是同级,是main的子级。在主组件文件中,导入Admin、Student和Button,然后在render方法中调用它们。请检查本文档页面的“组成组件”部分。