迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

如何解决 React Type {children: Element} has no properties in common with type IntrinsicAttribute

作者:迹忆客 最近更新:2022/04/27 浏览次数:

React.js 错误“Type {children: Element} has no properties in common with type IntrinsicAttributes” 当我们尝试将 children 道具传递给不带任何道具的组件时发生。 要解决错误,需要定义并键入组件上的属性。

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

const Box = () => { // 不带属性
  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 组件不使用任何属性,但我们正在尝试将 children 属性传递给它。

当一个组件与一个开始和结束标签一起使用时,标签之间的所有内容都会作为 children 属性传递给组件。

<MyComponent>
  Some children here
</MyComponent>

解决错误的一种方法是,如果不需要带任何子组件,则将组件用作 <Box />

const Box = () => {
  return (
    <div>
      <p>Hello world</p>
    </div>
  );
};

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

export default App;

这样就可以解决错误了,因为没有传递任何子属性。

但是,如果我们的组件必须采用 children 属性,则在声明组件时必须传入它。

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;

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

现在可以将 Box 组件传递给子组件并渲染它们。

确保我们的组件定义了它必须采用的所有属性。

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

const Box = (props: any) => { // 关闭 props 的类型检查
  return <div>{props.children}</div>;
};

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

export default App;

每当我们将组件用作:

<MyComponent>
  Some children
</MyComponent>

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

import React from 'react';

type BoxProps = {
  children: React.ReactNode; // 👈️ 定义 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;

如果我们不需要将任何子组件传递给我们的组件,只需将该组件用作 <MyComponent />

const Box = () => {
  return <div>Hello world</div>;
};

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

export default App;

除非注明转载,本站文章均为原创或翻译,欢迎转载,转载请以链接形式注明出处

本文地址:

迹忆客

专注技术分享,项目实战分享!

技术宅 乐于分享 7年编程经验
社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

热门文章

教程更新

热门标签

扫码一下
查看教程更方便