如何使用 React 中的 CSS 模块将多个类动态传递给子组件

Posted 2023-02-21

【中文标题】如何使用 React 中的 CSS 模块将多个类动态传递给子组件

【英文标题】：How to dynamically pass multiple classes to child component using CSS modules in React

【发布时间】：2021-11-19 02:52:04

【问题描述】：

我是 React.js 的新手。我正在使用 CSS 模块进行样式设置，并且我想动态地将多个类传递给一个子组件。下面是我的代码。

父组件

这里我将 p-1 color-red 传递给子组件。

import React,  Component  from 'react';
import Demo from '../../shared/Demo';

class App extends Component 
  state = 
      headerClass: 'p-1 color-red'
    
  
  render() 
    return (
      <Demo headerClass=this.state.headerClass>
      </Demo>
    );
  


export default App;

子组件

因为，类名是动态的，而且有不止一个类，我不知道如何在这里访问它。如果我在 headerClass 中只有一个类，则下面的代码可以正常工作。

import React from "react";
import styles from './Demo.css';

const demo = (props) => 
  return (
    <div className=styles[props.headerClass]> props.title </th>
  );


export default demo;

【参考方案1】：

您可以拆分headerClass 字符串属性并连接所有类名。

const demo = (props) => 
  const reducer = (acc, curr) => `$acc $styles[curr]`;
  const className = props.headerClass.split(' ').reduce(reducer, '');
  return <div className=className> props.title </div>;

【讨论】：

感谢它的工作。是否有任何既定的方式来使用大多数 React 开发人员都遵循的样式和类？