动态处理 React 可重用组件样式？答案

【问题标题】：Handling React reusable component styling dynamically?动态处理 React 可重用组件样式？
【发布时间】：2020-12-01 15:43:49
【问题描述】：

我正在从事一个有 React 前端的副项目，但我偶然发现了一个小问题。我发现自己不断向可重用组件添加道具，以改变样式。

例如，假设您有一个组件。在一种情况下，您希望它铺设“10px 20px”的填充，而在另一种情况下必须是“8px”。我正在尝试尽可能多地重用组件，但是传递这么多道具来更改边距和填充似乎有点乏味。

是否有任何类型的 React 组件模式可以帮助解决这个问题？我一直在研究许多模式，比如“渲染道具”或复合组件模式，但是当涉及到逻辑时它们都很棒。这个问题不涉及逻辑 - 只是样式，这就是为什么传递道具感觉有点过头了。

欢迎提出任何建议，并提前致谢。

【问题讨论】：

您如何定义何时更改样式？是基于父母的吗？也许您可以使用 CSS 层次结构来处理它...

标签： javascript reactjs

【解决方案1】：

我认为你的情况是关于作文的问题。

您可以根据“位置”将其应如何反应传递给您的组件，但您可以按原样使用组件。并让 place 纠正其内容行为。

例如你有 CardComponent

你可以这样写

const CardComponent = (props) => {
  return (
    <div className={props.cardClasses} styles={props.cardStyles}>
      <div className={props.titleClasses} styles={props.titleStyles}>
         Title
       </div>
      <div  className={props.contentClasses} styles={props.contentStyles}>
         {props.children}
       </div>
    </div>
  )
}

我使用了类和样式，因为这样写起来更快）在上述情况下，您需要传递很多道具来设置此组件的样式。但你可以将其拆分为更小的组件 CardComponent、CardTitle 和 CardContent

const CardTitle = (props) => {
  return (
      <div className={props.titleClasses} styles={props.titleStyles}>
         {props.children}
       </div>
  )
}

const CardContent = (props) => {
  return (
      <div className={props.contentClasses} styles={props.contentStyles}>
         {props.children}
       </div>
  )
}
const CardComponent = (props) => {
  return (
    <div className={props.cardClasses} styles={props.cardStyles}>
      {props.children}
    </div>
  )
}

然后像这样使用它

<CardComponent>
  <CardTitle>Title</CardTitle>
  <CardContent>content</CardContent>
</CardComponent>

在这种情况下，您可以单独设置它们的样式，甚至可以扩展/重用一些其他组件作为 CardComponent 的子组件

【讨论】：

谢谢！这看起来和我上面提到的“复合组件”模式一模一样——对吗？
是的。我不知道它被命名为“组件组件”模式。这种模式是更高级的Composition）

【解决方案2】：

只需将 css 传递给组件即可进行覆盖。类似的，

const Component = ({css}) => {
    const {firstNameCss, lastNameCss} = css

    return (<div>
               <div id="firstName" className={`${defaultFirstNameCss} ${firstNameCss}`}>
               <div id="lastName" className={`${defaultLastNameCss} ${lastNameCss}`}><div></div>
           </div>
    )
}

还有一个方便的帮助程序包供您使用，classnames 也适用于此。

【讨论】：