如何将 React 组件作为道具传递给另一个组件

Question

我试图在 Content.tsx 中调用 PopupDialog.tsx 作为 Item.tsx 的兄弟。 以前 PopupDialog.tsx 在 C.tsx 文件中被调用，但由于 z 索引问题，我试图把它拿出来并在 Content.tsx 中调用它

是否有可能以某种方式在 Content.tsx 中传递整个组件（popupDialog 及其参数），这样我就可以避免在 content.tsx 中来回传递 popupdialog 所需的参数。

C.tsx 中的代码，其中调用了 PopupDialog 组件。

const C = (props: Props) => (
  <>
      {props.additionalInfo ? (
      <div className="infoButton">
        <PopupDialog   // need to take this code out and want to add in Content.tsx 
          icon="info"
          callback={props.callback}
          position={Position.Right}
        >
          <div className="popuplist">{props.additionalInfo}</div>
        </PopupDialog>
      </div>
    ) : (
      <Button className="iconbutton"/>
    )}
  </>
);

Content.tsx 我想用它的参数调用 PopupDialog.tsx

const Content = (props: Props) => {
  const [componentToRender, docomponentToRender] = React.useState(null);
  const [isAnimDone, doAnim] = React.useState(false);
  return (
    <div className="ContentItems">
      <PWheel agent={props.agent} />
      {isAnimDone && (
        <>
          <Item {props.agent} />
          {componentToRender &&
            <PopupDialog/>     //want to call here with all its parameters to be passed
          }
        </>
      )}
    </div>
  );
};

文件夹结构

App.tsx
 ->ViewPort.tsx
   ->Content.tsx
     ->PWheel.tsx
     ->Item.tsx
       ->A.tsx
         ->B.tsx
           ->C.tsx
            {props.additionalinfo &&
              ->PopupDialog.tsx
     ->PopupDialog.tsx

Answer 1

因此，如果我正确理解了这个问题，您希望将一个组件传递给另一个组件，以便您可以在当前组件中使用传递的组件的属性或数据。 所以有三种方法可以实现这一点。

1）将数据或整个组件作为道具发送。这带来了缺点，即使不需要知识的组件
关于传递的组件也必须作为道具询问。所以这基本上是道具钻孔。

2）另一个是你可以使用上下文 api。所以上下文 api 是一种维护全局 state 变量的方法。上下文 object 并在组件中使用它。

3)Using Redux library.This is similar to context api but only disadavantage is that we will have to write lot of code to implement this.Redux is a javascript library.

如果您需要更多信息，请告诉我。

Answer 2

你需要：

  <>
          <Item {props.agent} />
          {componentToRender &&
            <PopupDialog abc={componentToRender} /> //you must call in this component, in this case i name it is abc , i pass componentToRender state to it
          }
        </>

然后 PopupDialog 将接收 componentToRender 作为 abc，在 PopupDialog 中，您只需要调用props.abc并完成。

• 如果您需要了解更多关于 prop 和 component 的信息，可以在这里查看

Answer 3

我认为您要使用的是高阶组件（HOC）。

基本用法是：

const EnhancedComponent = higherOrderComponent(WrappedComponent);

下面是一个将组件（及其所有道具）作为参数的实现：

import React, { Component } from "react";

const Content = WrappedComponent => {
  return class Content extends Component {
    render() {
      return (
        <>
          {/* Your Content component comes here */}
          <WrappedComponent {...this.props} />
        </>
      );
    }
  };
};

export default Content;

这是 React 文档中高阶组件的链接： https://reactjs.org/docs/higher-order-components.html

Answer 4

利用

useContext() 

详细信息请关注： React Use Context Hook