如何將 {props.children} 添加到 React 組件

Question

我有很多組件，里面有很深的嵌套{props.children} 。 考慮 DRY 原則有沒有辦法使用一些 React 模式來添加它。

例如，假設我有兩個組件，

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;

如果你看到上面的代碼，我們有COMP1和組合物2都有代碼{} props.children線內重復。

我現在想要的是一些將添加這行代碼的函數，如下所示，

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


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

Comp1WithPropsChildren = addPropsChildrenToComp(Comp1)

使用 HOC 不起作用，因為在 HOC 中我們從不修改傳遞的組件。 反正要aceve這個。？

要更多地了解我的問題，請參閱此演示： https : //codesandbox.io/s/trusting-http-pd1yu

在那里，我希望看到 CompWithPropsChildren 組件在其中渲染 props.children。

Answer 1

我想我明白您想要達到的目標，您只需使用另一個組件即可完成此任務。

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>
}

假設您的ChildComp有一些您不想復制的復雜邏輯，這將使您可以重用它。