Open
Description
openedon Jun 20, 2021
Similar to react/forbid-elements
, it would make sense in certain circumstances to have the ability to prevent the nesting of certain DOM elements.
Eg. to prevent <button>
from being used directly inside of <a>
(or vice versa), which is a common pattern that we see with beginners:
{
"react/forbid-dom-nesting": [
"error",
{
"rules": [
"a > button",
"button > a"
]
}
]
}
Example of incorrect code:
function LinkButton () {
return (
<a href="#1"><button>whoa</button></a>
);
}
Examples of correct code:
function LinkButton () {
return (
<a href="#1">whoa</a>
);
}
To make it search through multiple levels of nesting, then use the space combinator instead of the child combinator:
{
"react/forbid-dom-nesting": [
"error",
{
"rules": [
"a button",
"button a"
]
}
]
}
For performance reasons, with the space combinator, maybe it would make sense to limit this by default to 5 or 10 levels of nesting.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment