GOOGLE ADS

пятница, 6 мая 2022 г.

Как указать (необязательные) реквизиты по умолчанию с помощью TypeScript для функциональных компонентов React без сохранения состояния?

Я пытаюсь создать компонент React без сохранения состояния с дополнительными реквизитами и defaultProps в Typescript (для проекта React Native). Это тривиально с ванильным JS, но я не понимаю, как этого добиться в TypeScript.

Со следующим кодом:

import React, { Component } from 'react';
import { Text } from 'react-native';
interface TestProps {
title?: string,
name?: string
}
const defaultProps: TestProps = {
title: 'Mr',
name: 'McGee'
}
const Test = (props = defaultProps) => (
<Text>
{props.title} {props.name}
</Text>
);
export default Test;

Вызов <Test title="Sir" name="Lancelot" />отображает «Сэр Ланселот», как и ожидалось, но <Test />ничего не дает, хотя должен выводить «Мистер МакГи».

Любая помощь приветствуется.


Решение проблемы

Вот аналогичный вопрос с ответом: Реагируйте с помощью TypeScript — определите defaultProps в функции без сохранения состояния.

import React, { Component } from 'react';
import { Text } from 'react-native';
interface TestProps {
title?: string,
name?: string
}
const defaultProps: TestProps = {
title: 'Mr',
name: 'McGee'
}
const Test: React.SFC<TestProps> = (props) => (
<Text>
{props.title} {props.name}
</Text>
);
Test.defaultProps = defaultProps;
export default Test;

Комментариев нет:

Отправить комментарий

Laravel Datatable addColumn returns ID of one record only

Я пытаюсь использовать Yajra Datatable для интеграции DataTable на свой веб-сайт. Я смог отобразить таблицу, но столкнулся с проблемой. В по...