JIYIK CN >

React.js error “Type {children: Element} has no properties in common with type IntrinsicAttributes” occurs when we try to pass children prop to a component without any props. To resolve the error, you need to define and type the properties on the component.

The following is an example of how the error occurs.

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;

Notice that the Box component doesn't use any properties, but we are trying to pass the children property to it.

When a component is used with an opening and closing tag, everything between the tags is passed to the component as the children property.

<MyComponent>
  Some children here
</MyComponent>

One way to fix the error is to use the component as if it does not need to take any subcomponents <Box />.

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

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

export default App;

This will resolve the error since no child properties are passed.

However, if our component must take a children property, we must pass it in when declaring the component.

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;

We defined and typed a children property on the Box component to resolve the error.

Now you can pass the Box component to child components and render them.

Make sure our component defines all the properties it must take.

If you don't want to explicitly type your props and just want to turn off type checking, you can set the props object to anytype.

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;

Whenever we use a component as:

<MyComponent>
  Some children
</MyComponent>

You must define and type the children property on the specific component.

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;

If we don't need to pass any subcomponent to our component, just use the component as <MyComponent />.

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

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

export default App;