时间戳

首页 > 解决方案 > 如何使用 Typescript 过滤掉 React 组件的 props？

reactjs - 如何使用 Typescript 过滤掉 React 组件的 props？

问题描述

我使用两个组件：Test和Subtest. 组件应该做一些视觉装饰，Test并将部分 props 传递给Subtest组件。一些Subtest组件道具是可选的，并在其界面上指出。

Test组件道具接口：

interface TestProps {
  prop1: string;
  prop2: string;
  prop3?: string;
  prop4?: string;
}

Test零件：

export const Test = (props: TestProps) => {
  const { prop1, prop2: subProp, ...otherSubtestProps } = props;

  const subtestProps: SubtestProps = {
    subProp,
    ...otherSubtestProps
  };

  return (
    <div>
      <p>Test component</p>
      <ul>
        {Object.keys(props).map(prop => (
          <li>
            {prop}: {props[prop]}
          </li>
        ))}
      </ul>
      <Subtest {...subtestProps} />
    </div>
  );
};

Subtest组件道具接口：

interface SubtestProps {
  subProp: string;
  prop3?: string;
}

Subtest零件：

export const Subtest = (props: SubtestProps) => {
  return (
    <div>
      <hr />
      <p>Subtest component</p>
      <ul>
        {Object.keys(props).map(prop => (
          <li>
            {prop}: {props[prop]}
          </li>
        ))}
      </ul>
      <hr />
    </div>
  );
};

如果我Subtest使用 prop 调用组件prop4，编译将失败并TS2322出现错误——这是我期望的行为。 <Subtest subProp="value 2" prop4="value 4" />

然而，当我调用Test组件时，它会将prop4值传递给Subtest组件而没有错误。 <Test prop1="value 1" prop2="value 2" prop4="value 4" />将调用<Subtest subProp="value 2" prop4="value 4" />没有错误。

问题是，如何做到这一点，调用<Test prop1="value 1" prop2="value 2" prop4="value4" />将Subtest仅使用subProp和可选的prop3道具调用组件？

"react": "^16.8.0","typescript": "^3.3.3"

标签： reactjstypescript

解决方案

对我来说，看起来好像你只是把事情复杂化了，让它看起来很花哨，没有真正的目的，这会导致你遇到问题。

为了便于阅读，我会将您的代码更改为以下内容；

  const { prop2, prop3 } = props;

  const subtestProps: SubtestProps = {
    subProp: prop2,
    prop3
  };

因为这是你想要的。

推荐阅读