Тип элемента JSX "строка" не является функцией-конструктором для элементов JSX. Машинопись - PullRequest
Новая
       5

Тип элемента JSX "строка" не является функцией-конструктором для элементов JSX. Машинопись

1 голос
/ 29 мая 2020

Итак, я работал над элементом многоразового значка, который я могу вызвать в любом классе и просто передать строку <Icon name="chat" />, содержащую указанный c цвет значка .. Эта ошибка является результатом предыдущего вопроса Я поднял .. вы можете найти ссылку ниже

Я поднял вопрос раньше:

файл icon.ts 

const iconsList = {
    heart: '&#xe800;',
    star: '&#xe801;',
    like: '&#xe800;',
    dislike: '&#xe802;',
    flash: '&#xe803;',
    marker: '&#xf031;',
    filter: '&#xf0b0;',
    user: '&#xf061;',
    circle: '&#xf039;',
    hashtag: '&#xf029;',
    calendar: '&#xf4c5;',
    chevronLeft: '&#xf004;',
    optionsV: '&#xf142;',
    optionsH: '&#xf141;',
    chat: '&#xf4ac;',
    explore: '&#xf50d;'
};

interface Props{
    name: keyof typeof iconsList;
}

const Icon = ({name }: Props) => {
    let icon = iconsList[name];
    icon = icon.substr(3);
    icon = String.fromCharCode(parseInt(icon, 16));

    return icon;
 };

export default Icon;

profile.tsx 

import React from 'react';
import styles from '../assets/styles';

import {
  ScrollView,
  View,
  Text,
  ImageBackground,
  TouchableOpacity
} from 'react-native';
import Icon from '../components/Icon';
const Profile = () => {
return (

<TouchableOpacity>
  <Text style={styles.topIconLeft}>
    <Icon name="chevronLeft" />
  </Text>
</TouchableOpacity>

);
}

Эта строка <Icon name="chevronLeft" /> жалуется на ошибку «Тип элемента JSX 'строка' не является функцией конструктора для элементов JSX. ts (2605)

Скриншот: enter image description here

1 Ответ

0 голосов
/ 29 мая 2020

string не является допустимым возвращаемым значением для компонента реакции. Компонент реакции всегда должен возвращать элемент ReactDOM или Fragment, реализующий метод render. Вы можете попробовать 

const Icon : React.SFC<Props> = ({name }: Props) => {
    let icon = iconsList[name];
    icon = icon.substr(3);
    icon = String.fromCharCode(parseInt(icon, 16));

    return <>{icon}</>;
 };

И вообще не помешает, если вы переименовали icon.ts в icon.tsx. В зависимости от настроек вашего компилятора часть <>{icon}</> может неправильно распознаваться как разметка JSX.

...