형식 스크립트 스타일 구성 요소 오류: "형식 '{ children: string; }'에 형식 'IntrinsicAttributes'와 공통 속성이 없습니다."

형식 스크립트 스타일 구성 요소 오류: "형식 '{ children: string; }'에 형식 'IntrinsicAttributes'와 공통 속성이 없습니다."

스타일 컴포넌트에 타이프스크립트 오류가 표시됨

유형 '{ children: string; }'에 유형 'IntrinsicAttributes'.ts(2559)와 공통 속성이 없습니다.

import React from 'react'

import { NotificationSuccess, NotificationError } from '../../styles'

interface IProps {
  error?: boolean;
  message: string;
}

export const Notification = (props: IProps) => {
  const Note = () => props.error ? NotificationError : NotificationSuccess;
  // Error happens on <Note>
  return (<Note>{props.message}</Note>);
}

그리고 스타일:

import styled from 'styled-components';

export const NotificationDiv = styled.div`
  z-index: 11;
  position: fixed;
  left: 50%;
  margin-left: -160px;
  top: 1rem;
  padding: 1.5rem;
  width: 320px;
  height: auto;
  text-align: center;
  color: ${props => props.theme.offWhite};
  border-radius: 5px;
  cursor: pointer;
`

export const NotificationSuccess = styled(NotificationDiv)`
  background: ${props => props.theme.green};
`

export const NotificationError = styled(NotificationDiv)`
  background: ${props => props.theme.red};
`

여기서 이 답을 찾았고 패키지를 업그레이드했습니다.json은 다음과 같이 처리했지만, 그래도 도움이 되지 않았습니다.

이 랩 형식의 컴포넌트 오류가 "공통 속성이 없는" 이유

"styled-components": "4.0.3",
"@types/styled-components": "4.0.3",
"babel-plugin-styled-components": "^1.10.0",

풀 패키지json

{
  "name": "",
  "version": "2.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "next -p 7777",
    "build": "next build",
    "start": "next start -p 8000",
    "test": "NODE_ENV=test jest --watch --no-cache",
    "test-win": "SET NODE_ENV=test&& jest --watch"
  },
  "license": "ISC",
  "dependencies": {
    "@zeit/next-sass": "^1.0.1",
    "@zeit/next-typescript": "^1.1.1",
    "axios": "^0.18.0",
    "decko": "^1.2.0",
    "downshift": "^2.2.3",
    "enzyme": "^3.6.0",
    "enzyme-adapter-react-16": "^1.5.0",
    "graphql": "^14.0.2",
    "graphql-tag": "^2.9.2",
    "graphql-tools": "^4.0.0",
    "lodash.debounce": "^4.0.8",
    "next": "^7.0.2",
    "next-routes": "^1.4.2",
    "node-sass": "^4.11.0",
    "nprogress": "^0.2.0",
    "prop-types": "^15.6.2",
    "ramda": "^0.26.1",
    "react": "^16.7.0",
    "react-adopt": "^0.6.0",
    "react-dom": "^16.7.0",
    "react-redux": "^6.0.0",
    "react-transition-group": "^2.5.0",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0",
    "styled-components": "4.0.3",
    "tslint": "^5.12.1",
    "tslint-react": "^3.6.0",
    "typescript": "^3.2.4",
    "waait": "^1.0.2"
  },
  "devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.3.0",
    "@babel/preset-typescript": "^7.1.0",
    "@types/enzyme": "^3.1.15",
    "@types/jest": "^23.3.13",
    "@types/next": "^7.0.6",
    "@types/ramda": "^0.25.49",
    "@types/react": "^16.7.20",
    "@types/react-dom": "^16.0.11",
    "@types/react-redux": "^7.0.1",
    "@types/styled-components": "4.0.3",
    "@types/zeit__next-typescript": "^0.1.1",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^24.1.0",
    "babel-plugin-sass-vars": "^0.2.1",
    "babel-plugin-styled-components": "^1.10.0",
    "casual": "^1.5.19",
    "enzyme-to-json": "^3.3.4",
    "jest": "^24.1.0"
  },
  "jest": {
    "setupTestFrameworkScriptFile": "<rootDir>/jest.setup.js",
    "testPathIgnorePatterns": [
      "<rootDir>/.next/",
      "<rootDir>/node_modules/"
    ],
    "transform": {
      ".*": "babel-jest",
      "^.+\\.js?$": "babel-jest",
      "^.+\\.ts?$": "babel-jest",
      "^.+\\.tsx?$": "babel-jest"
    },
    "moduleFileExtensions": [
      "js",
      "json",
      "ts",
      "tsx"
    ],
    "modulePaths": [
      "<rootDir>/components/",
      "<rootDir>/pages/",
      "<rootDir>/shared/"
    ]
  }
}

구성 요소를 생성하는 경우:

<DeliverNow>

</DeliverNow>

자동으로 수신됩니다.props선언할 때:

const DeliverNow = () => {}

TypeScript는 그것들이 일치하지 않는다는 것을 알려 줍니다.실제로는DeliverNow수신하다props.

실제로는 다음과 같습니다.

const DeliverNow = (props:any) => {}

<Note>{props.message}</Note>와 같다Note({ children: props.message })그래서 타이프스크립트는 그 기능을 불평하고 있다.Note는 인수를 사용하지 않으며 함수 유형이 일치하지 않습니다.스타일 성분과는 관계가 없습니다.

(IntrinsicAttributes는 기능 컴포넌트를 쓸 때 확장되는 기본 인터페이스입니다.또는 그 idk xD 같은 것)

내 추측으로는 네가 원하는 건const Note = props.error ? NotificationError : NotificationSuccess;당신이 쓴 것 대신에요.

추신. 제가 틀릴 수도 있지만, 저는 대부분 그렇다고 확신합니다.

다음 오류가 발생하였습니다.

유형 '{ children: string; }'에 유형 'IntrinsicAttributes'.ts와 공통 속성이 없습니다.

리액트 어플리케이션에 태그를 동적으로 추가했을 때.나는 타이프 스크립트나 스타일 구성 요소와는 전혀 상관없는 훌륭한 해결책을 찾았다.

노드 작성은 다음 방법으로 충분합니다.React.createElement

예를 들어 다음과 같습니다.

const Title: React.SFC<TitleProps> = ({ tag, styled, children }) =>
  React.createElement(tag, { ...styled }, children);

const TitleStyled = styled(Title)`Your styled`

이건 내게 딱 맞는 방법이었어.내 컴포넌트에 종속 컴포넌트와 동일한 이름을 붙이려고 했는데 VS Code가 내 컴포넌트 대신 종속 컴포넌트에서 자동으로 Import되었습니다.

이 오류가 발생하는 가장 일반적인 경우는 스타일 컴포넌트에 함수 컴포넌트와 같은 이름을 붙이는 경우입니다.스타일 컴포넌트에 다음과 같은 포스트픽스를 붙입니다.ButtonStyled또는ButtonContainer그리고 너는 g2g이다.

컴포넌트 매뉴얼을 참조해 주십시오.

/**
 * A general `Component` has no implicit `children` prop.  If desired, you can
 * specify one as in `Component<{name: String, children: JSX.Element>}`.
 */
export declare type Component<P = {}> = (props: P) => JSX.Element;

그래서 이 경고를 없애기 위해서는 어린이나 당신이 원하는 소품들을 포함한 일반 정보를 전달해야 합니다.올바른 실장은 다음과 같습니다.

export const Notification: Component<IProps> = (props) => {
  const Note = () => props.error ? NotificationError : NotificationSuccess;
  // Error happens on <Note>
  return (<Note>{props.message}</Note>);
}

소품 타입은 고유의 것이므로 선언할 필요가 없습니다.Component<P>.

언급URL : https://stackoverflow.com/questions/55129942/typescript-styled-component-error-type-children-string-has-no-properti