Блог

Пока я читал статью Постоянные шаблоны компоновки в Next.js , есть часть, которую я не могу понять.

 // /pages/account-settings/basic-information.js
import SiteLayout from '../../components/SiteLayout'
import AccountSettingsLayout from '../../components/AccountSettingsLayout'

const AccountSettingsBasicInformation = () => <div>{/* ... */}</div>

AccountSettingsBasicInformation.getLayout = page => (
  <SiteLayout>
    <AccountSettingsLayout>{page}</AccountSettingsLayout>
  </SiteLayout>
)

export default AccountSettingsBasicInformation
  

При варианте 4 статическая функция getLayout добавляется в AccountSettingsBasicInformation.

Однако AccountSettingsBasicInformation является компонентом, а не объектом.

Возможно ли добавить статическую функцию в компонент подобным образом?

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

Свойство ‘hello’ не существует для типа ‘FC’.

 interface ITestProps {
  hello: () => void;
}

const Test: React.FC<ITestProps> = () => {
  return <TestFilter />;
};

Test.hello = () => { <div> this is a test </div> } // Test.hello occurs the error

export default Test;
  

Я объявил тип hello в ITestProps, но почему я получил ошибку?

объектом является все, что угодно, кроме базовых типов, включая классы es6 и функции.

но typescript имеет возможность принудительно применять свойства, которыми обладает объект,

таким образом, вы можете сказать, AccountSettingsBasicInformation.getLayout поскольку AccountSettingsBasicInformation не имеет объявления типа, typescript рассматривает его как любой (который включает базовые типы и объект с любыми свойствами)

но вы объявили Test как React.FC<ITestProps> , поэтому typescript принудительно устанавливает его свойства такими же, как React.FC<ITestProps> , поэтому он выводит ошибку