машинопись + React: определение defaultProps правильно

Допустим, вы определите свой компонент следующим образом:машинопись + React: определение defaultProps правильно

interface IProps { 
    req: string; 
    defaulted: string; 
} 

class Comp extends React.Component<IProps, void> { 
    static defaultProps = { 
    defaulted: 'test', 
    }; 

    render() { 
    const { defaulted } = this.props; 

    return (
     <span>{defaulted.toUpperCase()}</span> 
    ); 
    } 
}

, когда вы хотите использовать его, машинопись хочет defaulted пропеллер от вас, даже если это определено в defaultProps:

<Comp req="something" /> // ERROR: TypeScript: prop 'defaulted' is required

Однако, если вы определяете реквизит интерфейс следующим образом:

interface IProps { 
    req: string; 
    defaulted?: string; // note the ? here 
}

, то вы не можете использовать его в:

render() { 
    const { defaulted } = this.props; // ERROR: prop 'defaulted' possibly undefined 

    return (
    <span>{defaulted.toUpperCase()}</span> 
); 
}

Как определить IProps, defaultProps и компонент правильно, так что типы имеют смысл?

EDIT:

Я использую strictNullChecks флаг.

источник

2016-10-10 Idefixx

*„Я их по умолчанию“* ... не так ли? – jonrsharpe

Я уверен, что я делаю: 'статичные defaultProps: IDefaultProps = { Validate() => NULL, DefaultValue: '', };' – Idefixx

Хорошо, позвольте мне перефразировать: они, кажется, не быть дефолте код, который вы показываете в вопросе. Дайте [mcve]. – jonrsharpe

У меня есть пример со следующим кодом (ComponentBase - это всего лишь моя оболочка вокруг React.Component).

Edit: обновленный код для работы с 'strictNullChecks' устанавливающих

interface IExampleProps { 
    name: string; 
    otherPerson?: string; 
} 

/** 
* Class with props with default values 
* 
* @class Example 
* @extends {ComponentBase<IComponentBaseSubProps, {}>} 
*/ 
export class Example extends ComponentBase<IExampleProps, {}> { 
    public static defaultProps: IExampleProps = { 
     otherPerson: "Simon", 
     name: "Johnny" 
    }; 

    constructor(props: IExampleProps) { 
     super(props); 
    } 

    public render(): JSX.Element { 
     const person: string = this.props.otherPerson === undefined ? "" : this.props.otherPerson; 
     return(
      <div> 
       <h1><small>Message by ComponentBaseSub: Hello {this.props.name} and {person} </small></h1> 
      </div> 
     ); 
    } 
}

У меня нет никаких проблем с использованием Visual Studio Code, машинопись 2.0.3, TSLint 0.5.39.

источник

2016-10-11 06:56:04

возможно потому, что '{this.props.otherPerson}' ОК, чтобы быть 'undefined'. Попытайтесь добавить переменную, скажем,' const person: string = this.props.otherPerson; 'и см., если он жалуется – Idefixx

@Idefixx. Добавление именно этой переменной в тело метода «рендеринга» по-прежнему не приводит к проблеме, о которой вы сообщали. –

Вы можете проверить мою вилку для ответов на https://github.com/boxstart/react -typescript-samples. Пример 02 содержит необязательное свойство и defaultProps из моего примера выше. Если вы все еще получаете предупреждение/ошибку, используя этот проект, вам может потребоваться найти параметр в вашей среде. –

Даже проще является

<span>{(defaulted as string).toUpperCase()}</span>

работает так же, как со свойствами. Если Foo требует barProp свойства, но Parent не делает и получает его через defaultProps, Parent «s метод визуализации может сделать

<Foo barProp={this.props.barProp as string} />

источник

2017-05-05 06:30:38

машинопись + React: определение defaultProps правильно

ответ

Смежные вопросы