Obtention d'une erreur de typographie sur mon composant de style
Tapez '{children: string; } 'n'a aucune propriété en commun avec le type' IntrinsicAttributes'.ts (2559)
{ "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/" ] } }
Et les styles:
"styled-components": "4.0.3", "@types/styled-components": "4.0.3", "babel-plugin-styled-components": "^1.10.0",
J'ai trouvé cette réponse ici, et j'ai mis à jour mon package.json vers ce qui suit, mais cela n'a toujours pas aidé:
Pourquoi ces erreurs de composant stylé encapsulées" n'ont pas de propriétés en commun avec "
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}; `
Package.json complet
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>); }
3 Réponses :
est identique à Remarque ({children: props.message})
donc typScript se plaint de cette fonction Remarque
ne prend aucun argument et le type de fonction ne correspond pas. Cela n'a rien à voir avec les composants stylisés.
( code> est probablement l'interface par défaut que vous étendez lorsque vous écrivez un composant fonctionnel. Ou quelque chose comme ça idk xD)
Ma meilleure estimation est que vous voulez const Note = props.error? NotificationError: NotificationSuccess;
au lieu de ce que vous avez écrit.
PS. Je me trompe peut-être, mais je suis surtout sûr que c'est le cas.
Vous aviez raison, oui, je n'avais pas besoin de la partie = () =>
.
Ok, comme indiqué ci-dessus, juste pour clarifier si vous créez un composant
const DeliverNow = (props:any) => {}
il lui passe automatiquement des accessoires et si vous le déclarez
const DeliverNow = () => {}
J'ai eu cette erreur:
Tapez '{children: string; } 'n'a aucune propriété en commun avec le type' IntrinsicAttributes'.ts
Lors de l'ajout dynamique de balises dans mon application de réaction. J'ai trouvé une excellente solution qui n'a rien à voir avec des composants dactylographiés ou stylés.
Il suffit de créer un nœud via React.createElement
Pour exemple:
const Title: React.SFC<TitleProps> = ({ tag, styled, children }) => React.createElement(tag, { ...styled }, children); const TitleStyled = styled(Title)`Your styled`
Avez-vous essayé de supprimer
node_modules
et de le réinstaller?