Стилизованные компоненты и типографская ошибка - PullRequest
Новая
       8

Стилизованные компоненты и типографская ошибка

0 голосов
/ 25 января 2019

Я успешно установил стилевые компоненты в Reaction-native, но теперь я использую реагирующий-нативный веб-интерфейс и не могу заставить стилевые компоненты работать в Интернете в этом очень простом примере: 

import * as React from 'react';
import styled from 'styled-components';

export default class View extends React.PureComponent {
  public render() {
    return (
      <Container>
        <h1>Hey</h1>
      </Container>
    );
  }
}

const Container = styled.div;

Я получаю эту ошибку: 

Type error: JSX element type 'StyledComponentClass<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, a...' is not a constructor function for JSX elements.
Property 'render' is missing in type 'StyledComponentClass<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, a...'.  TS2605
> 11 |       <Container>

Это мой tsconfig.json: 

"target": "es6",
"jsx": "preserve",
"module": "esnext",
"sourceMap": true,
"outDir": "dist",
"types": [
  "react",
  "react-native",
  "jest"
],
"skipLibCheck": true,
"lib": [
  "es2015.promise",
  "esnext",
  "dom"
],
"alwaysStrict": false,
"downlevelIteration": true,
"strict": false,
"strictNullChecks": false,
"allowJs": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true

И мой пакет. Json: 

...
"devDependencies": {
  ...
  "@types/react": "^16.7.20",
  "@types/react-dom": "^16.7.20",
  "@types/react-native": "^0.52.25",
  "typescript": "^2.9.2"
},
"dependencies": {
  ...
  "react": "16.3.1",
  "react-dom": "^16.7.0",
  "styled-components": "^3.4.5",
}

Я пытался rm -rf node_modules; rm package-lock.json; npm install безрезультатно.

Возможно, здесь что-то упущено, но у кого-нибудь есть идеи? Не уверен, какую другую информацию я могу предоставить.

1 Ответ

0 голосов
/ 26 января 2019

Вы захотите использовать компонент React Native вместо стандартных тегов HTML.Вместо styled.div вы будете использовать styled.View.Также вы должны использовать компонент реагирования Text вместо стандартного HTML-тега, который будет содержать текстовые данные, такие как <H1>.

. Таким образом, это то, что ваш код должен перевести на 

import * as React from 'react'
import { Text } from 'react-native'
import styled from 'styled-components/native'

export default class View extends React.PureComponent {
    render() {
        return(
            <Container>
                <Text>Hey</Text>
            </Container>
        )
    }
}

const Container = styled.View
...