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

Question

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

父组件

这里我将 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;

子组件

因为 class 名称是动态的并且有多个 classes 我不知道如何在这里访问它。如果我在 headerClass.

中只有一个 class，则下面的代码有效

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

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

export default demo;

Answer 1

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

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 中使用 CSS 模块将多个类动态传递给子组件

How to dynamically pass multiple classes to child component using CSS modules in React

reactjs

css-modules

webpack-style-loader

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

How to dynamically pass multiple classes to child component using CSS modules in React

reactjs

css-modules

webpack-style-loader

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