将道具传递给 React 中的特定嵌套子项

Question

I am trying to configure some props to children.

In this dummy example I am testing the function in order to specifically target any child, nested or not, with the following prop: swipeMe .

It works very well if inside my div on the render function if it contains just a single child, like this:

    <SwapableItems>
      <div>
        {/*the p element will get the red color as defined on childrenHandler*/}
        <p swipeMe>Add Props</p> 
      </div>
    </SwapableItems>

Yet, if I add more children into my div , somehow I guess that my ternary operation on childrenHandler is not working well and I do not know why...

• If it has children, clone this element and call childrenHandler passing its children.
• If it has my desired prop, clone de element and do something with it.
• If none of the above, just clone the element.

return childHasChildren
      ? React.cloneElement(child, {}, childHasChildren)
      : child.props.swipeMe
      ? React.cloneElement(child, { ...swipeMeProps })
      : React.cloneElement(child, {});

Below is the full script. You can also check it out on Codesandbox

import React from "react";
import ReactDOM from "react-dom";

function App() {
  return (
    <SwapableItems>
      <div>
        <p swipeMe>Add Props</p>
        <div>Don't Add Props</div>
      </div>
    </SwapableItems>
  );
}

function SwapableItems({ children }) {
  const content = childrenHandler(children, { style: { color: "red" } });
  return content;
}

const childrenHandler = (children, swipeMeProps) => {
  const childEls = React.Children.toArray(children).map((child) => {
    const childHasChildren =
      child.props.children && React.isValidElement(child.props.children)
        ? childrenHandler(child.props.children, swipeMeProps)
        : undefined;
    return childHasChildren
      ? React.cloneElement(child, {}, childHasChildren)
      : child.props.swipeMe
      ? React.cloneElement(child, { ...swipeMeProps })
      : React.cloneElement(child, {});
  });
  return childEls;
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

I tested this work. I wrapped nested children by SwapableItems if has children.

function SwapableItems({ children }) {
  const props = { style: { color: "red" } };
  return Children.map(children, (child) => {
    let nestedChild = child.props.children;
    const hasNestedChild = nestedChild && typeof nestedChild !== "string"

    if (hasNestedChild) {
      nestedChild = <SwapableItems>{nestedChild}</SwapableItems>;
    }

    return child.props?.swipeMe || hasNestedChild
      ? cloneElement(child, child.props?.swipeMe ? props : {}, [nestedChild])
      : child;
  });
}

https://codesandbox.io/s/kind-snow-8zm6u?file=/src/App.js:345-751

Answer 2

child.props.children is an array, so React.isValidElement(child.props.children) is always falsy, to fix it try using React.cloneElement on it:

React.isValidElement(React.cloneElement(child.props.children)); // true

A style reset example:

const styleA = {
  color: "blue"
};

const InlineReset = ({ children }) => {
  return React.Children.map(children, child => {
    console.log(child.props);

    return React.cloneElement(child.props.children, { style: null });
  });
};

export default function App() {
  return (
    <InlineReset>
      <div>
        <h1 style={styleA}>Hello </h1>
      </div>
    </InlineReset>
  );
}

Answer 3

This is the solution:

I have initialized a variable which will hold the recursion outside of the logic and undefined.

let childHasChildren;

I have encapsulated the code inside an if statement with some adaptions: "in case child has children, either an array or object , and if within the passed children there is/are valid React elements"

const deeperChildren = child.props.children;
    const arrayOfChildren = Array.isArray(deeperChildren);
    const singleChildren =
      typeof deeperChildren === "object" && deeperChildren !== null;
    if (
      (arrayOfChildren &&
        deeperChildren.some((c) => React.isValidElement(c))) ||
      (singleChildren && React.isValidElement(deeperChildren))
    ) {

In order to pass the recursion without errors, in case the code within the if statement is called, I have cloned a filter/single object of which children would be React valid elements, then I pass just these/this into the recursion:

const validChildren = arrayOfChildren
        ? deeperChildren.filter((c) => React.isValidElement(c))
        : deeperChildren;

Here is the result

Now it accepts, one item with children, or an Array. This can be configured in order to dynamically pass props, with default ones and other props that could be passed from outside of the component, although the latter is not my case. This solution was desired in order to achieve more complex stuff without using those solutions, such as render props , props contracts, HOCs, etc.

const childrenHandler = (children, swipeMeProps) => {
  const childEls = React.Children.toArray(children).map((child) => {
    let childHasChildren;
    const deeperChildren = child.props.children;
    const arrayOfChildren = Array.isArray(deeperChildren);
    const singleChildren =
      typeof deeperChildren === "object" && deeperChildren !== null;
    if (
      (arrayOfChildren &&
        deeperChildren.some((c) => React.isValidElement(c))) ||
      (singleChildren && React.isValidElement(deeperChildren))
    ) {
      const validChildren = arrayOfChildren
        ? deeperChildren.filter((c) => React.isValidElement(c))
        : deeperChildren;

      childHasChildren = childrenHandler(validChildren, swipeMeProps);
    }

    return childHasChildren
      ? React.cloneElement(child, {}, childHasChildren)
      : child.props.swipeMe
      ? React.cloneElement(child, { ...swipeMeProps })
      : React.cloneElement(child, {});
  });
  return childEls;
};