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

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

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

2）另一个是可以使用上下文api，因此上下文api是维护全局状态变量的一种方式。因此，如果您遵循这种方法，则不需要传递数据或作为道具的componenet。无论何时需要数据您可以导入上下文对象并在componenet中使用它。

3）使用Redux库。这与context api类似，但是唯一的缺点是我们必须编写大量代码才能实现此目的。Redux是一个javascript库。

让我知道是否需要更多信息。

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将以abc的形式接收componentToRender，在PopupDialog中，您只需调用props.abc并完成。

如果您需要进一步了解prop和组件，可以查看它here

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

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

4 个答案: