时间戳

首页 > 解决方案 > 如何将类添加到传递的组件

javascript - 如何将类添加到传递的组件

问题描述

当试图将一个组件作为另一个组件的 prop 传递时，一切正常。但是，如果我想传递一个组件并在孩子内部处理它的 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>

  )
}

标签： javascriptreactjs

解决方案

我想到了两种方法：

传递一个组件

只需传递组件并让父级处理它的实例化。这样，您需要的唯一更改是确保<MyIcon />接受一个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 />} />

推荐阅读