简体   繁体   English

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

[英]I have two components. I want to call 1st component into the second component. How can I do it?

I have two components. 我有两个组成部分。 I want to call 2nd component into the first component component 我想将第二个组件称为第一个组件

//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;

if you want the second component in the first component just import it and place it in the div 如果要在第一个组件中添加第二个组件,只需将其导入并将其放置在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;

But doing that you will have to take Admin out of the Main component: 但是这样做,您将不得不从主要组件中删除Admin:

import React, { Component } from "react";


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


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

Not sure if I am understanding this correctly, but since you've loaded the 1st Component () into the 2nd component already, I would expect that trying to call the second one into the first will cause an error due to an infinite import issue. 不知道我是否理解正确,但是由于您已经将第一个组件()加载到了第二个组件中,因此我希望尝试将第二个组件调用到第一个组件中会由于无限导入问题而导致错误。

If you only want the second component in the first, but not first in the second, then the answer by Brad Ball should work. 如果您只想在第一个组件中使用第二个组件,而在第二个组件中则不需要,那么布拉德·鲍尔的答案应该起作用。

Taking a look at the code you're presenting to us, we can see you're invoking Admin as a Child Component of Main. 看一下您提供给我们的代码,我们可以看到您正在调用Admin作为Main的子组件。

@Brad Ball gave you the inverse, invoking Main as a Child Component of Admin. @Brad Ball给了您相反的效果,调用Main作为Admin的子组件。

If you want to compose them one needs to be the parent, the other the child. 如果要编写它们,则一个必须是父级,另一个必须是子级。

If you want them to be siblings you need a third component to be the parent of both. 如果希望它们成为同级,则需要第三个组件作为两者的父级。

Can you explain better what you want to do? 您能更好地解释您想做什么吗?

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 我有两个组件,我想通过第一个组件中的功能将属性更改为第二个组件 - I have two components and I want to change property into the second component by function in first component 我想为特定的方形组件设置样式。 - I want to style a particular square component. 我如何编写此类组件来响应功能组件。? - How can i write this class component to react functional component.? 我有 vue.js 组件,我有这两个 function 我想将它们传递到我的 vue 组件中我该怎么做 - i have vue js component which i have those two function i want to pass them into my vue component how can i do this 如何将更新数据发送到子组件。 反应 - How do I send updating data to a child component. React 我想使用rxjs来检测多个组件中的值变化。 但它只显示改变它的组件的变化 - I want to use rxjs subject to detect the value change in multiple components. But it only shows change in the component which changes it 我如何通过此错误无效的挂钩调用。 钩子只能在 function 组件的主体内部调用。 我正在使用 React18 - How do i get pass this error Invalid hook call. Hooks can only be called inside of the body of a function component. i am using React18 我有两个组件{addressone},{addresstwo} 并希望在 {addressone} 组件内单击按钮时添加和删除 {addresstwo} - i have two components{addressone},{addresstwo} and want to add and delete {addresstwo} on button click inside {addressone} component 在各种组件中调用一个组件。 角度4 - Call one component in various components. Angular 4 我将数据作为道具发送给组件。 但是,只有最后一个组件显示数据 - I send data as props to components. But, only the last component showing data
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM