Clojurians Log v2
reagent
How do I check whether rendering a child component actually resulted in some DOM?
I have a parent component that accepts a child, if the child decides that it shouldn't be rendered for some reason, an "unknown value" icon should be displayed.
So the problem is that the fact that something should be rendered is known only by children, and what exactly to display if nothing is rendered is known only by the parent.
Of course, I can restructure the whole thing to accommodate this specific pattern. But I'd rather have it in a more generic way where a child can be any component. There's probably some CSS trick (probably the :not(:only-child) selector) that achieves the same. But maybe there's some other solution?
As far as I know you can't. I think the "where a child can be any component" may be solved by the fact a component needs data, and if it's not that independent, you can know if you have data for it to display something or not (but so the parent actually do the conditional rendering). Maybe with a bit more information about what is the parent I could help better.
Nah, the CSS trick worked. :)
;; views.cljs
[:td
[:span child]
[:span {:class :unknown-value}
"Unknown value"]]
;; styles.css
span:not(:empty) + .unknown-value {
display: none;
}> As far as I know you can't confirmed by https://github.com/facebook/react/issues/5517
Yes you mentioned the CSS trick so I was talking about another in-code solution (and you may have wanted to know if the child is actually rendered or not for app logic)
Yeah, indeed, something like that would be useful. Good to know it's not feasible.
btw for the CSS :not has less support than :empty, so you may invert it and display:block when it's empty and none by default
> :not has less support than :empty What do you mean by that?
browser support
Ah, I'm fine with that, but thanks.