Как перебирать дочерние элементы компонента в TypeScript React?

Как выполнить итерацию через дочерние элементы компонента React в Typescript tsx?

будет действительным jsx:

public render() {
    return (
        <div>
            {React.Children.map(this.props.children, x => x.props.foo)}
        </div>
    );
}

однако в Typescript тип x равен React.ReactElement<any> поэтому у меня нет доступа к реквизиту. Есть ли какой-то кастинг, который мне нужно сделать?

8
react-jsx reactjs tsx typescript

2 ответов

однако в Typescript типом x является React.ReactElement так у меня нет доступа к бутафории. Есть ли какой-то кастинг, который мне нужно сделать?

Да. Также предпочитаю термин assertion. Быстрый:

React.Children.map(this.props.children, x => (x as any).props.foo)
14

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

вместо того, чтобы использовать React.ReactElement<P> в типе параметра функции:

React.Children.map(this.props.children, (child: React.ReactElement<ChildPropTypes>) => child.props.bar)
0