Машинопись. Уничтожить и распространить объект

Question

Попытка сохранить мои дочерние компоненты без гражданства (функциональные компоненты). Итак, я ищу удобный способ выделения значений состояния корневого компонента для его дочерних компонентов. Скажем,

interface IState { 
    a: string; 
    b: number; 
    c: (e) => void; 
} 

затем

<ChildA {...this.state as { a: string, c }} /> 
<ChildB {...this.state as { c: (e) => void, b }} /> 

К сожалению машинопись не поддерживает сокращенные имена свойств. Есть ли элегантный подход здесь?

Answer 1

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

Предполагая, что компонент имеет childâ реквизит, как:

interface ChildAProps { 
    a: string; 
    c: (e) => void; 
} 

Чтобы определить ребенок без гражданства использования компонентов:

const ChildA : React.SFC<ChildAProps> = props => 
    <div>{this.props.a}</div> 

React.SFC является псевдонимом для класса React.StatelessComponent. И позже, чтобы использовать экземпляр ChildA внутри родительского компонента с состоянием, просто напишите:

<ChildA {...this.state} />