Suppose I have a component:
< pre>class Child extends Component {
//…
render() {
return
< /div>
}
}
class Parent extends Component {
//…
traverse(children) {
console. log(children);
React.Children.map(this.traverse);
}
render() {
this.traverse(this.props.children);
return
}
}
class Container extends Component {
//…< br /> render() {
return
}
}
I hope Can access the “unreachable” range, but React.Children.map only traverses the literal “child”, not the internal children of the component.
Is there a way to access those in the traversal function?
React.Children.map(this.props.children,child => {/*use child*/}) can access child objects. If the child has children, they will be able to Access as child.props.children.
You can use a recursive component to recursively traverse the tree structure. This is an example component, it just presents the number of child nodes that each node has.
const RecursiveWrapper = props => {
const wrappedChildren = React.Children.map(
props.children,
child => {
if (child .props && child.props.children) {
return (
{child.props.children}
)
}
return (
{'children: 0'}
)
}
)< br /> return (
{`children: ${wrappedChildren.length}`}
{wrappedChildren}
)
}
Use something more understandable Replace each child to create a visualization of the tree structure of any node wrapped in this kind of wrapper.
I am interested in traversing the entire component tree in React. < p>
Suppose I have a component:
class Child extends Component {
//...
render() {
return
Not reachable
}
}
class Parent extends Component {
//...
traverse(children) {
console.log(children);
React.Children.map(this.traverse);
}
render() {
this.traverse(this.props.children);
return {this.props.children}
}< br />}
class Container extends Component {
//...
render() {
return
}
}
I want to be able to access the “unreachable” range, but React.Children.map only traverses the literal “child” , Not the internal child of the component. < /p>
Is there a way to access those in the traversal function?
You can traverse the tree structure. You have found the React.Children.map method. This is the key to further deepening.
React.Children.map(this.props.children,child => {/*use child*/}) can access child objects. If the child has children, they will be accessible as child.props.children.
You can use recursive components to recursively traverse the tree structure. This is an example component, which just presents the number of child nodes that each node has.
const RecursiveWrapper = props = > {
const wrappedChildren = React.Children.map(
props.children,
child => {
if (child.props && child.props.children) {
return (
{child.props.children}
)
}
return (
{'children: 0'}
)
}
)
return (
{`children: ${wrappedChildren.length}`}
{wrappedChildren}< br />
)
}
Replace each child with something more understandable to create a package in this Visualization of the tree structure of any node in the wrapper.