如何在没有任何值的情况下向 JSX 中的 HTML 元素添加数据属性

Question

起初我不得不向自定义元素/组件添加一个属性，所以我在这里尝试这样做，但我只能将它添加到非自定义元素，如 div 和 input。

https://codesandbox.io/s/react-16-966eq

const dAttribute = { "data-rr-mask": "" };
const App = () => (
  <div style={styles}>
    <h4>Context </h4>
    <FeatureContext {...dAttribute} name="Context" />
    <hr />
    <h4> Error2 Boundaries</h4>
    <FeatureErrorBoundaries />
    <hr />
    <h4> Fragment</h4>
    <h2>
      <FeatureFragment />
    </h2>
    <hr />
    <h4>Reference</h4>
    <FeatureRef />
    <hr />
    <h4>Portals</h4>
    <FeaturePortal />
    <hr />
    <h4>Life Cycle</h4>
    <FeatureLifeCycle />
  </div>
);

render(<App {...dAttribute} />, document.getElementById("root"));

此外，此属性最终将用于 HTML 元素，我需要它没有任何值，例如： <input data-rr-mask />另一个问题是我必须添加一个空字符串作为值； 否则，应用程序会抛出错误。

有没有办法做到这一点，这样你就不会在元素内得到"data-rr-mask"=''

Answer 1

编辑（基于评论，OP 实际上是在生成的 HTML 上寻找要解析的数据属性，没有任何值）

为了完全消除生成的 HTML 元素的值，正如用户对我的回答所评论的那样，您只需要为您的数据属性/道具使用一个空字符串。

export default function App() {
  return (
    <div className="App">
      <input data-rr-mask="" /> {/* will be resolved to <input data-rr-mask> on the generated HTML code*/} 
    </div>
  );
}

这是它的一个工作示例。

这是一个混合您的请求的工作示例。

---

（基于第一个请求的原始答案）

首先，您必须考虑传递给自定义组件的每个属性，然后都可以在组件props上找到。

因此，例如，如果您在名为data-rr-mask App组件上传递自定义属性，则可以在App的道具下找到它：

const App = (props) => {
  console.log(props) // { "data-rr-mask": "foo" }

  return <div>
    <MySecondCustomComponent {...props} /> 
  </div>
};


render(<App data-rr-mask="foo" />, document.getElementById("root"));

然后，在你的MySecondCustomComponent的props你可以找到你的自定义属性。

Answer 2

在我的理解中，一个没有值的道具是一个值为真的布尔道具。

所以这意味着

<div someProp />

是相同的

<div someProp={true} />

尝试以下操作是否能解决您的问题：

const dAttribute = { "data-rr-mask": true };

有关布尔 HTML 属性的更多信息，请参阅https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes 。