如何仅在具有 Typescript 的容器组件的上下文中使用 React 道具？

Question

I've been trying to fix this Typescript error I'm getting for some time now.

I've created a sandbox to illustrate the problem. We have

1. An App component (this wraps everything)
2. A 'wrapper' component ( AddDateContainer ) - this renders it's children and renders either a timestamp string next to each child or the year depending on whether the child has a yearOnly prop passed to it
3. A Text component - this is a super dumb component that simply renders the textToRender prop passed to it

The problem I am getting is that Typescript is complaining about me sending a yearOnly prop to the Text component because it is not included in Text 's interface. I'd rather not include it in Text 's interface since it only going to be seen when used within the AddDateContainer component.

How can I tell typescript to ignore the yearOnly prop in this case?

this example is pretty arbitrary. I have created this for illustration purposes. The real use case is a lot more valid

Code,

import React from "react";

interface TextInterface {
  textToRender: string;
}

const Text = ({ textToRender }: TextInterface) => {
  return <span>{textToRender}</span>;
};

const AddDateContainer = ({
  children
}: {
  children: React.ReactElement | React.ReactElement[];
}) => {
  const renderDate = (yearOnly: boolean) => {
    const date = new Date();
    const dateToRender = yearOnly ? date.getFullYear() : date.getTime();
    return <span>{dateToRender}</span>;
  };

  return (
    <div>
      {React.Children.map(children, (child) => {
        /**
         * IMPORTANT
         * HERE WE ARE REMOVING THE yearOnly prop because it was only needed
         * for the Container.
         * How can we get Typescript to stop complaining!?
         */
        const { format, ...originalProps } = child?.props;
        return (
          <span>
            {React.cloneElement(child, originalProps)}{" "}
            {renderDate(child.props.yearOnly)}
          </span>
        );
      })}
    </div>
  );
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <AddDateContainer>
        <Text yearOnly textToRender="I love this" />
      </AddDateContainer>
    </div>
  );
}

Answer 1

Is there a reason you can't add the prop to the higher order component? Something like this:

interface TextInterface {
  textToRender: string;
}

const Text = ({ textToRender }: TextInterface) => <span>{textToRender}</span>;

interface AddDateHocProps extends PropsWithChildren<{}> {
  readonly yearOnly: boolean;
}

const AddDateHoc = ({ children, yearOnly }: AddDateHocProps) => {
  const date = new Date();
  const dateToRender = yearOnly ? date.getFullYear() : date.getTime();

  return (
    <div>
      {React.Children.map(children, (child) => (
        <span>
          {child}
          <span>{dateToRender}</span>;
        </span>
      ))}
    </div>
  );
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <AddDateHoc yearOnly>
        <Text textToRender="I love this" />
      </AddDateHoc>
    </div>
  );
}

Answer 2

What you want is not functionally distinct from this:

import React from "react";

interface TextInterface {
  textToRender: string;
}

const Text = ({ textToRender }: TextInterface) => {
  return <span>{textToRender}</span>;
};

const FormattedDate = ({
  yearOnly
}) => {
    const date = new Date();
    const dateToRender = yearOnly ? date.getFullYear() : date.getTime();
    return <span>{dateToRender}</span>;
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Text yearOnly textToRender="I love this" />
      <FormattedDate yearOnly />
    </div>
  );
}

Answer 3

Hi guys thanks for the response. I've found something which isn't quite what I wanted but is flexible enough that I think I'm happy with it. I've used a generic in the Text interface. It feels like what I was trying to do ie make the Container component handle the types might not be possible.

Here is the change,

interface TextInterface {
  textToRender: string;
}

const Text = <T extends TextInterface>(props: T) => {
  const { textToRender } = props;
  return <span>{textToRender}</span>;
};

The T makes it so the yearOnly can get through (any other props I might want to add for the benefit of the Container) will get through without me explicitly writing those props into the interface.