Question

我使用两个组件：Test和Subtest。 Test组件应进行一些视觉装饰，并将其道具的一部分传递到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道具调用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"

Answer 1

在我看来，您似乎只是在使事情复杂化，而使其看起来没有任何实际目的，那么这会导致您遇到问题。

出于可读性考虑，我会将您的代码更改为以下内容；

  const { prop2, prop3 } = props;

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

因为这就是您想要的。

如何使用Typescript过滤掉React Component的道具？

1 个答案: