有没有办法指定在与子组件具有相同 prop 的高阶组件上访问哪个 prop？

Question

我正在 React 中创建一个更高阶的组件来上传文件并向用户显示上传进度。

我有一个文本组件来显示文件名，还有一个进度条组件来显示进度。这些道具如下：

interface TextProps {
  value?: string
  id?: string;
  className?: string;
  ...
}

type ProgressBarProps = {
  value?: number;    
  label?: string;
  isError?: boolean;
  ...
  };

它们的定义方式的简化视图如下：

function ProgressBar({value, ...rest}: ProgressBarProps) {
  return (
    <DivWrapper>
      <Component {...(rest as T)} />
      <ProgressBar
        value={value}
      />
    </DivWrapper>
  );
};

function Text({value, ...rest}: TextProps){
  return (
    <Text value={value}>
    </Text>
  );
}


const TextWithProgressBar = ProgressBar(Text);

现在，当我尝试使用它时，我正在执行以下操作：

function render(file) {
  const ProgressBarPropDef = {
    value: 50,
    isError: false,
    ...
  }    

  return (
    <TextWithProgressBar
      value={file.name}
      {...ProgressBarPropDef}
    >
    </TextWithProgressBar>
  )
}

当我删除

{ProgressBarPropDef}

时，文本字段中的文件名设置正确。但是当我包含该行时，

{ProgressBarPropDef}

会覆盖文件名值。我看到相同的内容作为值传递给 Text 和 ProgressBar 组件。如何向这两个组件传递不同的值？

我环顾四周，没有看到有人遇到类似的问题。我认为这是因为道具名称冲突是一种不好的做法。但是，这些是共享组件，我无法更改其道具名称。

Answer 1

1。在 HOC 中解构和重命名 Props：

function ProgressBar({ value, label, isError, ...rest }: ProgressBarProps) {
  // ... your ProgressBar implementation
}

function Text({ value, ...rest }: TextProps) {
  // ... your Text implementation
}

const TextWithProgressBar = (TextComponent) => (props) => {
  const { value: fileName, ...progressBarProps } = props; // Destructure and rename

  return (
    <DivWrapper>
      <TextComponent value={fileName} {...rest} />
      <ProgressBar value={progressBarProps.value} {...progressBarProps} />
    </DivWrapper>
  );
};

说明：

• 我们定义了

  TextWithProgressBar

  HOC，它以

  TextComponent

  作为参数。
• 在 HOC 内部，我们解构传递给它的 props。
• 我们将

  value

  属性重命名为

  fileName

  ，专门用于

  TextComponent

  。
• 我们创建一个新对象

  progressBarProps

  ，其中包含所有剩余的道具（不包括重命名的

  fileName

  ）。
• 渲染组件时，我们将

  fileName

  传递给

  TextComponent

  并将

  progressBarProps

  传播到

  ProgressBar

  组件。

2。在您的组件中使用 HOC：

function render(file) {
  const ProgressBarPropDef = {
    value: 50,
    isError: false,
    // ... other props
  };

  return (
    <TextWithProgressBar text={Text}> {/* Pass Text component */}
      {file.name} {/* Pass filename directly */}
      {...ProgressBarPropDef}
    </TextWithProgressBar>
  );
}

说明：

• 我们将

  Text

  组件本身作为参数传递给

  TextWithProgressBar

  。
• 我们将

  file.name

  直接传递给 HOC，确保它到达

  Text

  组件。
• 我们展开

  ProgressBarPropDef

  对象，它现在只包含与

  ProgressBar

  相关的道具。