IntrinsicAttributes and IntrinsicClassAttributes


https://stackoverflow.com/questions/59969756/not-assignable-to-type-intrinsicattributes-intrinsicclassattributes-react-js
IntrinsicAttributes and IntrinsicClassAttributes
Interfaces implemented in TypeScript. They influence React and .jsxs interaction with the DOM elements, while working with Custom Components.
Underlying Principle
Lets assume you have
interface BarProps {
foo: string;
}
class Bar extends React.Component {
...
}
If you try to render it
render() {
return (
<form>
  <Bar />
</form>
);
}
You'll get a similar error; since you're violating the interface typecheck. The Component should have a mandatory props i.e BarProps passed as an argument here.
Instead to make it work, you'll need to do something like..
render() {
return (
<form>
  <Bar foo="Jack Daniel's"/>
</form>
);
}
or you could remove it from the Component definition itself.
class Bar extends React.Component<> {
...
}
or make the foo optional..
interface BarProps{
foo?: string;
}
Idea is to implement consistency.
In your case you're passing an unknown prop i.e action which has probably not been defined in your Component.
When you call your component like - it essentially means, import all available props.
When you explicitly call action prop like it throws the big fat error.
The mentioned errors are quite notorious. You can find more insights in this debugging guide for React and TypeScript which highlights these errors and share the possible fix.
You can read more about the implementation of IntrinsicAttributes and IntrinsicClassAttributes in this repository
InterinsicAttributesとInterinsicClassAttributes
TypeScriptで実現したインタフェース.カスタムコンポーネントを使用するときのDOM要素とのインタラクション和.jsxインタラクティブコンポーネントに影響します.
基本原則
仮に君が
interface BarProps {
foo: string;
}
class Bar extends React.Component {
...
}
レンダリングしようとすると
render() {
return (
<form>
  <Bar />
</form>
);
}
類似のエラーが発生しました.これは、インタフェースタイプチェックに違反しているためです.コンポーネントには必須のpropsが必要です(たとえば、BarPropsはここでパラメータとして渡されます).
次の操作を行う必要があります.
render() {
return (
<form>
  <Bar foo="Jack Daniel's"/>
</form>
);
}
または、コンポーネント定義自体から削除できます.
class Bar extends React.Component<> {
...
}
あるいはfooオプションで...
interface BarProps{
foo?: string;
}
アイデアは一貫性を実現することです.
Actionコンポーネントで定義されていない未知のプロパティを渡しています.
コンポーネントを呼び出すと、本質的に使用可能なすべてのコンポーネントが取得されます.
actionpropを明示的に呼び出すと、大きなエラーが発生します.
言及した誤りは悪名高い.このReactとType Scriptのデバッグガイドでは、これらのエラーが強調表示され、変更を可能な限り共有し、より多くの洞察力を提供します.
このリポジトリの実装を詳しく読むことができます.