React：类型 {children: Element} 与类型 IntrinsicAttributes 没有共同的属性

作者

React: 类型 {children: Element} 与类型 IntrinsicAttributes 没有共同的属性

React: Type {children: Element} has no properties in common with type IntrinsicAttributes

children当我们尝试将prop 传递给不带任何 props 的组件时，会出现 React.js 错误“Type {children: Element} has no property in common with type IntrinsicAttributes” 。

要解决该错误，请在组件上定义并键入 props。

类型没有共同的属性

以下是错误发生方式的示例。

应用程序.tsx
const Box = () => { // 👈️ takes no props
  return (
    <div>
      <p>Hello world</p>
    </div>
  );
};

const App = () => {
  return (
    <div className="App">
      {/* ⛔️ Error: Type '{ children: Element; }' has no properties
       in common with type 'IntrinsicAttributes'. ts(2559) */}
      <Box>
        <span>Test</span>
      </Box>
    </div>
  );
};

export default App;

请注意，该Box组件不接受任何 props，但我们试图children向它传递一个 props。

当组件与开始和结束标签一起使用时，标签之间的所有内容都会作为childrenprop 传递给组件。
应用程序.tsx
<MyComponent>
  Some children here
</MyComponent>

使用该组件而不传递任何子组件

解决该错误的一种方法是使用该组件，就好像<Box />它不需要任何子组件一样。

应用程序.tsx
const Box = () => {
  return (
    <div>
      <p>Hello world</p>
    </div>
  );
};

const App = () => {
  return (
    <div className="App">
      <Box />
    </div>
  );
};

export default App;

这解决了错误，因为没有children传递任何道具。

children在传递之前输入你的props

但是，如果您的组件必须采用childrenprop，则必须在声明组件时键入它。

应用程序.tsx
import React from 'react';

type BoxProps = {
  children: React.ReactNode; // 👈️ type children
};

const Box = (props: BoxProps) => {
  return <div>{props.children}</div>;
};

const App = () => {
  return (
    <div className="App">
      <Box>
        <span>Hello</span>
        <span>Test</span>
      </Box>
    </div>
  );
};

export default App;

我们在组件上定义并键入了一个 Children 属性Box来解决该错误。

现在Box可以传递组件children并渲染它们。

确保您的组件定义了它必须采用的所有道具。

关闭类型any检查

如果您不想显式地键入 props 并且只想关闭类型检查，则可以将对象设置props为anytype。

应用程序.tsx
const Box = (props: any) => { // 👈️ turns off type checking for props
  return <div>{props.children}</div>;
};

const App = () => {
  return (
    <div className="App">
      <Box>
        <span>Hello</span>
        <span>Test</span>
      </Box>
    </div>
  );
};

export default App;

任何时候您将组件用作：

应用程序.tsx
<MyComponent>
  Some children
</MyComponent>

您必须children在特定组件上定义并键入属性。

应用程序.tsx
import React from 'react';

type BoxProps = {
  children: React.ReactNode; // 👈️ define children prop
};

const Box = (props: BoxProps) => {
  return <div>{props.children}</div>;
};

const App = () => {
  return (
    <div className="App">
      <Box>
        <span>Hello</span>
        <span>Test</span>
      </Box>
    </div>
  );
};

export default App;

如果您不需要将任何子组件传递给组件，只需将该组件用作<MyComponent />.

应用程序.tsx
const Box = () => {
  return <div>Hello world</div>;
};

const App = () => {
  return (
    <div className="App">
      <Box />
    </div>
  );
};

export default App;

如果您收到错误
Type ‘() => JSX.Element[]’ is not assignable to type FunctionComponent，请单击链接并按照说明进行操作。