如何为传递的组件添加类

Question

当尝试将一个组件作为另一个组件的道具传递时，一切工作都很好。但是如果我想要传递一个组件并在子级内部处理它的css类，那么我现在就迷失了方向。

在我的脑海中，我试图实现类似的目标：

import Navbar from 'what/ever/path/Navbar/is/in/Navbar.js';

export default function ParentComponent {
  return(
     <Navbar NavIcon={<MyIcon/>} />
  )
}

.... Imports etc...

export default function Navbar(props) {
  const {NavIcon} = props;
  return(
    <Navigation>
        // Now use the Prop as a Component and pass default classNames to it.
        // So that we don't need to wrap everything inside a span / div etc.
       <NavIcon className="AddCustomStylesAlwaysHere" />
   </Navigation>

  )
}

Answer 1

我想到了两种方法：

只需传递组件并让父级处理其实例化。这样，您所需要的唯一更改就是确保 接受classname属性：

const MyIcon = ({ className }) => {
  return <div className={className} />
};

const Navbar = ({ NavIcon }) => {
  return (
    <Navigation>
      <NavIcon className="AddCustomStylesAlwaysHere" />
    </Navigation>
  );
};

<Navbar NavIcon={MyIcon} />

这样，您就可以处理组件的实例化，而父组件只是呈现它。在这种情况下，您必须使用React实用程序来修改现有元素(https://reactjs.org/docs/React-api.html#cloneElement):

const MyIcon = ({ className }) => {
  return <div className={className} />
};

const Navbar = ({ NavIcon }) => {
  return (
    <Navigation>
      {React.cloneElement(NavIcon, { className: 'AddCustomStylesAlwaysHere' })}
    </Navigation>
  );
};

<Navbar NavIcon={<MyIcon />} />