React.Children.toArray无法使用打字稿

Question

Typescript无法使用React.Children.toArray在子级上检测props对象 我必须使用any []，因为如果我使用ReactChild []-数组项上未检测到props。如何正确输入？ 谢谢！

const items: any[] = React.Children.toArray(this.props.children)

// select whatever item was told to be onload first
const itemPaymentType = items[0].props['data-payment']

Answer 1

Typescript在这里做正确的事。看一下ReactChild的类型定义：

type ReactChild = ReactElement<any> | ReactText;

其中ReactText键入为string | number。

通过说const items: ReactChild[]来告诉TypeScript items是一个数组，其中包含可能是字符串的元素。显然，字符串没有props作为属性，因此，当您尝试使用props时，它就是在抱怨。

如果您确定组件的子元素将永远是包含要查找的prop类型的true元素，则可以将输出键入为ReactElement<P>，其中P是您期望的prop类型。但是，这样做实际上是在浇铸您无法保证的事情。更好的方法可能是允许TypeScript类型推断通过如下方式起作用：

const items = React.Children.toArray(this.props.children); // Will be ReactChild[]

const item = items[0];
if (typeof item === 'string' || typeof item === 'number') {
    console.error('Expecting component children to be of type ...');
} else {
    // At this point, TypeScript will know that item must be of type ReactElement
    // since you have already taken care of the number and string case
    const itemPaymentType = item.props['data-payment'];
    // ...
}

Answer 2

casieber答案是正确的。

但是为了使用打字稿访问道具，这是必需的：

const item = items[0];
if (React.isValidElement<{prop1: boolean}>(item)) {

    // item.props.prop1 -- works
}