时间戳

首页 > 解决方案 > 添加空的未使用的类名来反应组件

reactjs - 添加空的未使用的类名来反应组件

问题描述

目前未使用的类名会自动从我的组件中删除，如果我不使用它们并用 CSS “填充”它们。我正在开发一个可以在国外网站上使用的小部件，并希望让用户能够在他们的网站上编写自定义 CSS 来影响小部件。在某些地方，classNames 应该基于一个 ID（例如className={'question-'+question_id}.

我不知道我的 webpack 的哪个部分负责删除类。我怎样才能禁用它或更好：我怎样才能告诉 webpack 不要删除这个特殊的类？

const path = require('path');
const loaderUtils = require('loader-utils');

const HtmlWebPackPlugin = require("html-webpack-plugin");
const DotenvPlugin = require('webpack-dotenv-plugin');

const htmlWebpackPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html",
  inject: "head"
});

const dotEnvPlugin = new DotenvPlugin({
  sample: './.env.default',
  path: './.env'
});

const getLocalIdent = (loaderContext, localIdentName, localName, options) => {
  .....
};

module.exports = {
  output: {
    library: 'XLVNT',
    libraryTarget: 'umd',
    umdNamedDefine: true,
    filename: 'x.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader"
          },
        ]
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {
              modules: true,
              localIdentName: 'x-[folder]-[local]',
              getLocalIdent: getLocalIdent,
            }
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true,
              localIdentName: 'x-[folder]-[local]',
              getLocalIdent: getLocalIdent,
            }
          } ,
          "sass-loader"
        ]
      },
      {
          test: /\.(pdf|jpg|png|gif|svg|ico)$/,
          use: [
              {
                  loader: 'url-loader'
              },
          ]
      },
    ]
  },
  plugins: [dotEnvPlugin, htmlWebpackPlugin]
};

标签： reactjswebpackwebpack-style-loader

解决方案

如果您希望有人使用您的组件或组件库，您应该更多地考虑“props”而不是 css 类来进行样式自定义。

如果您需要 Widget 的用户能够完全操纵组件的样式，您有很多选择，而不必在所有元素上抢先编写 classNames。

我发现最常见的是让你的组件接收一个属性altClass，或者className然后在你的组件包装器中使用它。这样，用户可以分配一个类来自己控制样式。

这个属性甚至可以是一个对象，它包含一堆 CSS 键/值，您可以以相同的方式应用这些键/值，但可以应用于组件中的多个元素。

我希望这回答了你的问题。

如果你想要灵感，你应该查看一些开源的 UI 库，比如Material UI或Ant Design，它们很好地处理了这种场景。

让我们先把 React 放在一边。想象一下，您有一个接收两个参数的函数：id和className. id来自用户页面上的元素 className 是一个字符串，对应于将用于自定义事物的类。

webpack.config.js

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'colorme.js',
    library: 'colorme'
  }
};

index.js

export function addThings(id, className) {
  document.getElementById(id)
    .innerHTML = (
      '<div class="'+ className +'">Testing things</div>'
    )
}

此函数addThings将在您的元素（的）中注入id一个带有可配置的 div className。

然后，在您的用户页面中：

<html>
  <head>
    <style>
      .asd {
        background-color: red;
      }
      .awd {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="test"></div>
    <script type="text/javascript" src="./colorme.js"></script>
    <script>
      window.colorme.addThings('test', 'asd')
      // window.colorme.addThings('test', 'awd')
      // ...
    </script>
  </body>
</html>

您将看到添加了“Testing things” div，分别带有“asd”或“awd”类。现在您的用户可以控制该 div 的外观。

如果这对您有用，请在此处阅读更多信息：https ://webpack.js.org/guides/author-libraries/

如果传递选项很重要，您可能可以使用 data-* 属性，如下所示：

<style>
  .asd {
    background-color: red;
  }
  .awd {
     background-color: blue;
  }
</style>
<div data-root_class="asd" data-some_other_class="lala" id="test"></div>
<script type="text/javascript" src="./colorme.js"></script>
<script> colorme.init('test') </script>

推荐阅读