TSlint неправильно работает с компонентами React Native Redux

Допустим, у меня есть это

interface IProps {
  text: string
}

class TextComponent extends PureComponent<IProps> {
  render() {
    return (
      <Text>{this.props.text}</Text>
    )
  }
}

function mapStateToProps(state: ITextComponentReduxStore) {
  return {
    text: state.text,
  }
}

function dispatchAction(dispatch: (x: any) => any) {
  return {
  }
}

export default connect(mapStateToProps, dispatchAction)(TextComponent)

Когда я хочу использовать этот компонент, я просто делаю

<TextComponent />
^^^^^^^^^^^^^^^^^     <- Webstorm underlines this

Webstorm (TSLint) жалуется на

TS2741: Property 'text' is missing in type '{}' but required in type 'Readonly<Pick<IProps, "text">>'.

Как я могу предотвратить это?

Реквизит является частью магазина Redux.

react-native react-redux webstorm tslint

01.02.2019 19:03

Умерло ли Create-React-App?

В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.

Освоение React Native: Пошаговое руководство для начинающих

React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...

Ускоренная стилизация компонентов React Native с помощью NativeWind

В чем разница между react native и react ?

React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...

От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React

Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...

Хуки React: что это такое и как их использовать

Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...

124

Ответы 1

вы определяете реквизиты по мере необходимости

interface IProps {
  text: string
}

Итак, вам нужно использовать компонент

<TextComponent text = {“...”}/>

или вы определяете его как необязательный

interface IProps {
  text?: string
}

так что вы можете использовать его как

<TextComponent/>

если вы хотите передать сложный объект в качестве реквизита

interface IProps {
  data?: ProfileData[];
}

и интерфейс ProfileData,

interface ProfileData {
    name: string;
    age: number;
    photos: string[];
}

и вы можете использовать свой компонент

<TextComponent data = {[{name:”John”, age:26, photos:[“url1”,”url2”]}]}/>

или если вы не хотите определять конкретный тип, вы можете просто определить его как any

interface IProps {
  data?: any;
}

но это не лучший выбор для машинописного текста.

хм.. что, если у меня есть сложный объект, а не просто string в качестве опоры? Разве нет способа сказать tslint, чтобы он просто не рассматривал IProps?

— 01.02.2019 19:42

01.02.2019 19:28