In React, how can I traverse the entire render tree, not only “children”
I'm interested in traversing the entire tree of components in React.
Let's say I have a component:
class Child extends Component {
//...
render() {
return <div>
<span>Not reachable</span>
</div>
}
}
class Parent extends Component {
//...
traverse(children) {
console.log(children);
React.Children.map(this.traverse);
}
render() {
this.traverse(this.props.children);
return <div>{this.props.children}</div>
}
}
class Container extends Component {
//...
render() {
return <Parent>
<Child />
</Parent>
}
}
I would like to be able to access the "Not reachable" span, but React.Children.map only traverses literally written "children", not component inner children.
Is there any way to access those in a traverse function?
reactjs
asked Jul 6 '16 at 15:19
jamaljamal
90119
|
show 1 more comment
I'm interested in traversing the entire tree of components in React.
Let's say I have a component:
class Child extends Component {
//...
render() {
return <div>
<span>Not reachable</span>
</div>
}
}
class Parent extends Component {
//...
traverse(children) {
console.log(children);
React.Children.map(this.traverse);
}
render() {
this.traverse(this.props.children);
return <div>{this.props.children}</div>
}
}
class Container extends Component {
//...
render() {
return <Parent>
<Child />
</Parent>
}
}
I would like to be able to access the "Not reachable" span, but React.Children.map only traverses literally written "children", not component inner children.
Is there any way to access those in a traverse function?
reactjs
asked Jul 6 '16 at 15:19
jamaljamal
90119
What's the use case here? Seems like the hierarchy that needs to be traversed would exist in some state somewhere, not in the React elements that are created as a result of such state.
– azium
Jul 6 '16 at 15:52
I agree with azium, tell us your use case and we might be able to help you out with an alternate solution. Generally, you do not want to traverse children like that. It is very common in libraries like jQuery, but mostly unnecessary for React.
– Mario Tacke
Jul 6 '16 at 16:10
I'm trying to create a visualization of the tree. I definitely need to be able to traverse the entire tree this way.
– jamal
Jul 6 '16 at 16:12
Please tell more about your case, maybe even include a specific example of what you're trying to achieve. Fwiw, you can't just do that, but if you give us more details, a more react-way could be figured.
– Gosha Arinich
Jul 6 '16 at 19:54
1
This is a good question, and the "show me your use case" comments are a bit silly. I hope somebody can actually answer this question. I'll probably hack up a quick traversal method, actually a bit shocked this doesn't exist anywhere.
– Chris J
May 14 '18 at 23:39
|
show 1 more comment
I'm interested in traversing the entire tree of components in React.
Let's say I have a component:
class Child extends Component {
//...
render() {
return <div>
<span>Not reachable</span>
</div>
}
}
class Parent extends Component {
//...
traverse(children) {
console.log(children);
React.Children.map(this.traverse);
}
render() {
this.traverse(this.props.children);
return <div>{this.props.children}</div>
}
}
class Container extends Component {
//...
render() {
return <Parent>
<Child />
</Parent>
}
}
I would like to be able to access the "Not reachable" span, but React.Children.map only traverses literally written "children", not component inner children.
Is there any way to access those in a traverse function?
reactjs
asked Jul 6 '16 at 15:19
jamaljamal
90119
I'm interested in traversing the entire tree of components in React.
Let's say I have a component:
class Child extends Component {
//...
render() {
return <div>
<span>Not reachable</span>
</div>
}
}
class Parent extends Component {
//...
traverse(children) {
console.log(children);
React.Children.map(this.traverse);
}
render() {
this.traverse(this.props.children);
return <div>{this.props.children}</div>
}
}
class Container extends Component {
//...
render() {
return <Parent>
<Child />
</Parent>
}
}
I would like to be able to access the "Not reachable" span, but React.Children.map only traverses literally written "children", not component inner children.
Is there any way to access those in a traverse function?
reactjs
reactjs
asked Jul 6 '16 at 15:19
jamaljamal
90119
asked Jul 6 '16 at 15:19
jamaljamal
90119
asked Jul 6 '16 at 15:19
jamaljamal
90119
asked Jul 6 '16 at 15:19
jamaljamal
90119
asked Jul 6 '16 at 15:19
jamaljamal
90119
90119
What's the use case here? Seems like the hierarchy that needs to be traversed would exist in some state somewhere, not in the React elements that are created as a result of such state.
– azium
Jul 6 '16 at 15:52
I agree with azium, tell us your use case and we might be able to help you out with an alternate solution. Generally, you do not want to traverse children like that. It is very common in libraries like jQuery, but mostly unnecessary for React.
– Mario Tacke
Jul 6 '16 at 16:10
I'm trying to create a visualization of the tree. I definitely need to be able to traverse the entire tree this way.
– jamal
Jul 6 '16 at 16:12
Please tell more about your case, maybe even include a specific example of what you're trying to achieve. Fwiw, you can't just do that, but if you give us more details, a more react-way could be figured.
– Gosha Arinich
Jul 6 '16 at 19:54
1
This is a good question, and the "show me your use case" comments are a bit silly. I hope somebody can actually answer this question. I'll probably hack up a quick traversal method, actually a bit shocked this doesn't exist anywhere.
– Chris J
May 14 '18 at 23:39
|
show 1 more comment
What's the use case here? Seems like the hierarchy that needs to be traversed would exist in some state somewhere, not in the React elements that are created as a result of such state.
– azium
Jul 6 '16 at 15:52
I agree with azium, tell us your use case and we might be able to help you out with an alternate solution. Generally, you do not want to traverse children like that. It is very common in libraries like jQuery, but mostly unnecessary for React.
– Mario Tacke
Jul 6 '16 at 16:10
I'm trying to create a visualization of the tree. I definitely need to be able to traverse the entire tree this way.
– jamal
Jul 6 '16 at 16:12
Please tell more about your case, maybe even include a specific example of what you're trying to achieve. Fwiw, you can't just do that, but if you give us more details, a more react-way could be figured.
– Gosha Arinich
Jul 6 '16 at 19:54
1
This is a good question, and the "show me your use case" comments are a bit silly. I hope somebody can actually answer this question. I'll probably hack up a quick traversal method, actually a bit shocked this doesn't exist anywhere.
– Chris J
May 14 '18 at 23:39
What's the use case here? Seems like the hierarchy that needs to be traversed would exist in some state somewhere, not in the React elements that are created as a result of such state.
– azium
Jul 6 '16 at 15:52
What's the use case here? Seems like the hierarchy that needs to be traversed would exist in some state somewhere, not in the React elements that are created as a result of such state.
– azium
Jul 6 '16 at 15:52
I agree with azium, tell us your use case and we might be able to help you out with an alternate solution. Generally, you do not want to traverse children like that. It is very common in libraries like jQuery, but mostly unnecessary for React.
– Mario Tacke
Jul 6 '16 at 16:10
I agree with azium, tell us your use case and we might be able to help you out with an alternate solution. Generally, you do not want to traverse children like that. It is very common in libraries like jQuery, but mostly unnecessary for React.
– Mario Tacke
Jul 6 '16 at 16:10
I'm trying to create a visualization of the tree. I definitely need to be able to traverse the entire tree this way.
– jamal
Jul 6 '16 at 16:12
I'm trying to create a visualization of the tree. I definitely need to be able to traverse the entire tree this way.
– jamal
Jul 6 '16 at 16:12
Please tell more about your case, maybe even include a specific example of what you're trying to achieve. Fwiw, you can't just do that, but if you give us more details, a more react-way could be figured.
– Gosha Arinich
Jul 6 '16 at 19:54
Please tell more about your case, maybe even include a specific example of what you're trying to achieve. Fwiw, you can't just do that, but if you give us more details, a more react-way could be figured.
– Gosha Arinich
Jul 6 '16 at 19:54
1
1
This is a good question, and the "show me your use case" comments are a bit silly. I hope somebody can actually answer this question. I'll probably hack up a quick traversal method, actually a bit shocked this doesn't exist anywhere.
– Chris J
May 14 '18 at 23:39
This is a good question, and the "show me your use case" comments are a bit silly. I hope somebody can actually answer this question. I'll probably hack up a quick traversal method, actually a bit shocked this doesn't exist anywhere.
– Chris J
May 14 '18 at 23:39
|
show 1 more comment
1 Answer
1
active
oldest
votes
It is possible to traverse the tree structure. You've done well to already find the React.Children.map method. It is key in going deeper.
React.Children.map(this.props.children, child => { /* work with child */ }) affords you access to the child object. If the child has children, they will be accessible as child.props.children.
You can recursively travel through the tree structure with a recursive component. Here's an example component that simply renders the amount of children each node has.
const RecursiveWrapper = props => {
const wrappedChildren = React.Children.map(
props.children,
child => {
if (child.props && child.props.children) {
return (
<RecursiveWrapper>
{child.props.children}
</RecursiveWrapper>
)
}
return (
<div>
{'children: 0'}
</div>
)
}
)
return (
<React.Fragment>
{`children: ${wrappedChildren.length}`}
<div>
{wrappedChildren}
</div>
</React.Fragment>
)
}
replace each child with something more intelligible to create a visualization of the tree structure of any node wrapped in this kind of wrapper.
answered Dec 31 '18 at 18:23
Jemi SaloJemi Salo
8701516
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f38227647%2fin-react-how-can-i-traverse-the-entire-render-tree-not-only-children%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
It is possible to traverse the tree structure. You've done well to already find the React.Children.map method. It is key in going deeper.
React.Children.map(this.props.children, child => { /* work with child */ }) affords you access to the child object. If the child has children, they will be accessible as child.props.children.
You can recursively travel through the tree structure with a recursive component. Here's an example component that simply renders the amount of children each node has.
const RecursiveWrapper = props => {
const wrappedChildren = React.Children.map(
props.children,
child => {
if (child.props && child.props.children) {
return (
<RecursiveWrapper>
{child.props.children}
</RecursiveWrapper>
)
}
return (
<div>
{'children: 0'}
</div>
)
}
)
return (
<React.Fragment>
{`children: ${wrappedChildren.length}`}
<div>
{wrappedChildren}
</div>
</React.Fragment>
)
}
replace each child with something more intelligible to create a visualization of the tree structure of any node wrapped in this kind of wrapper.
answered Dec 31 '18 at 18:23
Jemi SaloJemi Salo
8701516
add a comment |
It is possible to traverse the tree structure. You've done well to already find the React.Children.map method. It is key in going deeper.
React.Children.map(this.props.children, child => { /* work with child */ }) affords you access to the child object. If the child has children, they will be accessible as child.props.children.
You can recursively travel through the tree structure with a recursive component. Here's an example component that simply renders the amount of children each node has.
const RecursiveWrapper = props => {
const wrappedChildren = React.Children.map(
props.children,
child => {
if (child.props && child.props.children) {
return (
<RecursiveWrapper>
{child.props.children}
</RecursiveWrapper>
)
}
return (
<div>
{'children: 0'}
</div>
)
}
)
return (
<React.Fragment>
{`children: ${wrappedChildren.length}`}
<div>
{wrappedChildren}
</div>
</React.Fragment>
)
}
replace each child with something more intelligible to create a visualization of the tree structure of any node wrapped in this kind of wrapper.
answered Dec 31 '18 at 18:23
Jemi SaloJemi Salo
8701516
add a comment |
It is possible to traverse the tree structure. You've done well to already find the React.Children.map method. It is key in going deeper.
React.Children.map(this.props.children, child => { /* work with child */ }) affords you access to the child object. If the child has children, they will be accessible as child.props.children.
You can recursively travel through the tree structure with a recursive component. Here's an example component that simply renders the amount of children each node has.
const RecursiveWrapper = props => {
const wrappedChildren = React.Children.map(
props.children,
child => {
if (child.props && child.props.children) {
return (
<RecursiveWrapper>
{child.props.children}
</RecursiveWrapper>
)
}
return (
<div>
{'children: 0'}
</div>
)
}
)
return (
<React.Fragment>
{`children: ${wrappedChildren.length}`}
<div>
{wrappedChildren}
</div>
</React.Fragment>
)
}
replace each child with something more intelligible to create a visualization of the tree structure of any node wrapped in this kind of wrapper.
answered Dec 31 '18 at 18:23
Jemi SaloJemi Salo
8701516
It is possible to traverse the tree structure. You've done well to already find the React.Children.map method. It is key in going deeper.
React.Children.map(this.props.children, child => { /* work with child */ }) affords you access to the child object. If the child has children, they will be accessible as child.props.children.
You can recursively travel through the tree structure with a recursive component. Here's an example component that simply renders the amount of children each node has.
const RecursiveWrapper = props => {
const wrappedChildren = React.Children.map(
props.children,
child => {
if (child.props && child.props.children) {
return (
<RecursiveWrapper>
{child.props.children}
</RecursiveWrapper>
)
}
return (
<div>
{'children: 0'}
</div>
)
}
)
return (
<React.Fragment>
{`children: ${wrappedChildren.length}`}
<div>
{wrappedChildren}
</div>
</React.Fragment>
)
}
replace each child with something more intelligible to create a visualization of the tree structure of any node wrapped in this kind of wrapper.
answered Dec 31 '18 at 18:23
Jemi SaloJemi Salo
8701516
answered Dec 31 '18 at 18:23
Jemi SaloJemi Salo
8701516
answered Dec 31 '18 at 18:23
Jemi SaloJemi Salo
8701516
answered Dec 31 '18 at 18:23
Jemi SaloJemi Salo
8701516
8701516
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f38227647%2fin-react-how-can-i-traverse-the-entire-render-tree-not-only-children%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What's the use case here? Seems like the hierarchy that needs to be traversed would exist in some state somewhere, not in the React elements that are created as a result of such state.
– azium
Jul 6 '16 at 15:52
I agree with azium, tell us your use case and we might be able to help you out with an alternate solution. Generally, you do not want to traverse children like that. It is very common in libraries like jQuery, but mostly unnecessary for React.
– Mario Tacke
Jul 6 '16 at 16:10
I'm trying to create a visualization of the tree. I definitely need to be able to traverse the entire tree this way.
– jamal
Jul 6 '16 at 16:12
Please tell more about your case, maybe even include a specific example of what you're trying to achieve. Fwiw, you can't just do that, but if you give us more details, a more react-way could be figured.
– Gosha Arinich
Jul 6 '16 at 19:54
1
This is a good question, and the "show me your use case" comments are a bit silly. I hope somebody can actually answer this question. I'll probably hack up a quick traversal method, actually a bit shocked this doesn't exist anywhere.
– Chris J
May 14 '18 at 23:39