如何将 {props.children} 添加到 React 组件

Question

i have many components which have {props.children} deeply nested inside. considery DRY principle is there a way to add this using some React pattern.

example let's say i have two components,

Comp1.js

import React from "react";

const Comp1 = props => {
  return (
    <div>
      <h1>{props.children}</h1>
    </div>
  );
};

export default Comp1;

Comp2.js

import React from "react";

const Comp2 = props => {
  return (
    <div>
      <div>
        <h1>{props.children}</h1>
      </div>
    </div>
  );
};

export default Comp2;

if you see above code we have both Comp1 and Comp2 have line of code {props.children} repeated inside.

what i want now is some function which will add this line of code, something like below,

    const addPropsChildrenToComp  = (Comp)=>{
      return(
        (props)=>{
///do somehting here
        }
      )
    }


const Comp1 = props => {
  return (
    <div>
      <h1></h1>
    </div>
  );
};

Comp1WithPropsChildren = addPropsChildrenToComp(Comp1)

using HOC doesn't work because, in HOC we never modify passed component. anyway to aceve this.?

to get more idea of my problem see this demo: https://codesandbox.io/s/trusting-http-pd1yu

in there i woul like to see CompWithPropsChildren component render props.children inside it.

Answer 1

I think I see what you're trying to get to, and you can accomplish this just using another component.

import React from "react";
import ChildComp from "./ChildComp";

const Comp1 = props => {
  return (
    <div>
      <ChildComp {...props} />
    </div>
  );
};

export default Comp1;

import React from "react";

const ChildComp = props => {
   return <h1>{props.children}</h1>
}

Assuming your ChildComp has some complex logic you don't want to duplicate, this will make it reusable for you.