Skip to content


 Zabbix
 Grafana
 Prometheus
 React Three Fiber
 Threejs and TypeScript
 SocketIO and TypeScript
 Blender Topological Earth
 Sweet Home 3D
 Design Patterns Python
 Design Patterns TypeScript
   
 Course Coupon Codes
Three.js and TypeScript
Kindle Edition
$6.99 $9.99 Paperback 
$22.99 $29.99




Design Patterns in TypeScript
Kindle Edition
$6.99 $9.99 Paperback
$11.99 $19.99




Design Patterns in Python
Kindle Edition
$6.99 $9.99 Paperback
$11.99 $19.99




Nesting Custom Components

Working Example

Description

You can put components, inside the same components. E.g.,

<Box position-x={1.25}>
  <Box position-x={1.25}>
    <Box position-x={1.25} />
  </Box>
</Box>

Any child components, will be passed into the parent as props. The inner components, will be accessible via the property props.children.

Any child components will inherit the transforms of the parent component. I.e., scale, rotation and/or position.

For a component to be able to be nested recursively, you need to also add {props.children} into the output JSX. E.g.,

function Box(props) {
  return <mesh {...props}>{props.children}</mesh>
}

or, you can also use destructuring assignment,

function Box({ children }) {
  return <mesh>{children}</mesh>
}

GitHub Branch

git clone https://github.com/Sean-Bradley/React-Three-Fiber-Boilerplate.git
cd React-Three-Fiber-Boilerplate
git checkout nestingComponents
npm install
npm start