Передача типов реквизита в повторно используемый компонент

Question

Как я могу воспользоваться типом источника (fullName), объявленным в родительском компоненте, где свойство объявлено внутри дочернего компонента?

например

type fullNameProps = {
   name: string;
   last: string;
}

const App = () => {
   const fullName: fullNameProps = {
     name: "John",
     last: "Doe",
   } 

   return <ChildComponent source={fullName} />

};

Как я могу использовать тип source в ChildComponent, объявленном в Компоненте приложения? Объект source может отличаться, поскольку ChildComponent является компонентом многократного использования. Есть ли способ, которым я могу использовать Generics для этого?

const ChildComponent = ({ source }: { source ??? }) => {};

Answer 1

Возможно, сначала нам придется преобразовать ChildComponent в компонент generi c. Это будет выглядеть примерно так:

interface ChildComponentProps<T = unknown> {
    source: T
}

function ChildComponent<T extends any>(props: ChildComponentProps<T>) {
    return (
    <div>...</div>
    )
}

Теперь мы используем этот компонент, предоставляя тип для его источника. Примерно так:

interface AppProps {
// your app's props
}

type FullNameProps = {
    name: string;
    last: string;
}

const App: React.FC<AppProps> = (props) => {
    const fullName: FullNameProps = {
        name: "John",
        last: "Doe",
    }

    return (
        <div>
            <ChildComponent<FullNameProps>
                source={fullName}
            />
        </div>
    )
}

Это должно сработать. Также рекомендуется предоставить метод рендеринга вашему дочернему компоненту для рендеринга значения, переданного в источнике.

Весь пример с включенной функцией рендеринга :

interface AppProps {
// your app's props
}

type FullNameProps = {
    name: string;
    last: string;
}

const App: React.FC<AppProps> = (props) => {

    const fullName: FullNameProps = {
        name: "John",
        last: "Doe",
    }

    const renderItem = (item: FullNameProps) => {
        return (
            <h1>
                {item.name} {item.last}
            </h1>
        )
    }

    return (
        <div>
            <ChildComponent<FullNameProps>
                source={fullName}
                renderItem={renderItem}
            />
        </div>
    )
}


interface ChildComponentProps<T = unknown> {
    source: T
    renderItem: (item: T) => JSX.Element
}

function ChildComponent<T extends any>(props: ChildComponentProps<T>) {
    return (
        <div>
            {props.renderItem(props.source)}
        </div>
    )
}

Надеюсь, это поможет!

Answer 2

Рассматривали ли вы использование source: node? Узел будет propType. Или, что еще лучше, вы можете учесть несколько типов следующим образом:

  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),