Reactjs 删除生产生成中的html属性

为了能够为我们的Webpack构建的React应用程序编写Selenium测试用例，我们在HTML元素的某些部分添加了data-*属性，例如：

<div class="Component__item___2jdnc" data-app-feature="example-id"></div>

---

我们可以使用这些元素来定位要与之交互并在其上断言的元素。但是，在生产环境中，我希望将它们删除。如何实现这一点？

创建一个删除属性（几行代码）的工具，并在构建后操作中删除该工具。

有几个babel插件可能适合这一要求：

---

根据评论编辑 如果属性的值为

未定义

，则会自动忽略这些属性。您可以利用这一点，并使用某种配置（可能是

process.env.NODE_env

？）和a为

数据应用程序功能

值设置道具（仅当不在生产中时）

HOC

const appFeature = (Component, appFeature) => (props) => {
  const isRunningInProduction = configuration.isProduction // or however you want to set this
  return <Component appFeature={ isRunningInProduction ? appFeature : undefined } {...props}  />
}

const-appFeature=（组件，appFeature）=>（道具）=>{
const isrunningproduction=configuration.isProduction//或您希望如何设置它
返回
}

组件

const ExampleComponent = ({appFeature}) => {
  return <div class="Component__item___2jdnc" data-app-feature={appFeature}></div>
}

export default appFeature(ExampleComponent, "example-id")

const ExampleComponent=（{appFeature}）=>{
返回
}
导出默认appFeature（示例组件，“示例id”）

您可以使用selenium来执行此操作：

WebElement yourElement = driver.findElement(By.xpath("xpath to element"));

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].removeAttribute('data-app-feature','example-id')",yourElement);

---

此答案仅适用于使用webpack进行应用程序的生产/开发构建的人员。 在webpack.prod.config中执行以下操作。在webpack.dev.config中忽略

• 通过运行

  npm安装来安装插件

• 将其添加到babel loader配置中，如下所示

    {
      test: /\.(js|jsx)$/,
      use: [{
        loader: 'babel-loader',
        options: {
          plugins: [
            ["react-remove-properties", {"properties": ["data-test-id"]}]
          ]
        }
      }],
      exclude: /node_modules/,
    }
  

• 数据测试id

  是我们将在selenium测试用例中用于获取元素的属性。根据问题，它是

  数据应用程序功能

我们可以使用下面的插件做同样的事情

---

我在使用

样式化组件时遇到了同样的问题。这是我发现的最直接的解决方案，无需使用HOC或Babel插件

我创建了一个函数，用于检查特定环境，然后返回传递给它的值，或
未定义的值。如果属性值
未定义
，则不包括该属性

export const ifDev = val => (process.env.NODE_ENV === "development" ? val : undefined);

然后在组件中：

import { ifDev } from './dev';

<div className="sc-fMiknA" data-app-feature={ifDev("element-id")}></div>

从“/dev”导入{ifDev}；

现在，我可以在使用生成的类名时在浏览器测试中找到元素，而属性将不会包含在生产版本中。
这是我第一次这样做，必须为此提供构建插件。但我开始意识到，我必须在构建时这样做，因此针对不同的环境有不同的构建，我更希望有一个相同的构建，可以从测试到预构建，最后进入产品。只是澄清一下，你不希望构建工件发生变化，只希望用户浏览器中的元素发生变化？您使用的是客户端渲染还是服务器端渲染？客户端渲染，所以我认为您的建议是前进的方向。您能告诉我如何使用webpack实现这一点吗？注意：属性不会出现在DOM中，但它们仍然存在于生成DOM的JS源文件中。（关于这件事，这个问题很模糊，所以你的答案还是很好的！我提到这个问题只是为了防止有人读到这个问题，并且确实想减少他们的包大小）。创建一个工具，在stackoverflow上发布正确完整的答案，并提供完整的示例和问题的有效答案。你能用selenium来更好地阅读问题而不是“只做工具兄弟”吗？