Свойство 'filter' не существует для типа 'string'

Question

Я хочу отфильтровать значение ключа компонента. Я использую filter для этого. Но я получаю ошибку: TS2339: Property 'filter' does not exist on type 'string | number | boolean | {} | ReactElement<any> | ReactNodeArray | ReactPortal'. Property 'filter' does not exist on type 'string'.

Значение ключа - это значение ключа div.

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

getComponent(key){
    return this.props.children!.filter(component => {
      return component.key === key;
    });
  }

Я ожидаю фильтрации значения ключа моего компонента. Может быть, у кого-нибудь была такая же проблема?

Я использую React-машинопись

Answer 1

Я столкнулся с подобной проблемой несколько недель назад, и я использовал React.Children для итерации по вложенным дочерним элементам, переданным компоненту.

Вот вам код, который я сделал:

public renderByKey(childElement, key) {
    return React.Children.map(childElement, child => {
        if (child != null) {
            if (child.props != undefined) {
                if (typeof (child.type) !== 'string') {
                    if (child.props.key != undefined && child.props.key === key) {
                        return child;
                    }
                }
                if (child.props.children != undefined) {
                    return this.renderByKey(child.props.children,key);
                }
            }
        }
    });
}

Я знаю неудобства, связанные с рекурсивностью, но я использовал его с другими реквизитами (не с ключом, как в вашем случае), и отлично работал для меня.

Answer 2

Как гласит ошибка, строки, числа, логические значения и различные другие типы, перечисленные для this.props.children, не имеют функции с именем filter.Поэтому вам нужно сначала убедиться, что вы имеете дело с массивом, а затем использовать утверждение типа, чтобы сообщить TypeScript, что:

if (Array.isArray(this.props.children)) {
    return (this.props.children as ReactNodeArray).filter(component => component.key === key);
}
// ...handle the fact it's not an array...