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

Question

At first I had to add an attribute to a custom element/component, so I tried doing it here, but i can only add it to non-custom elements like div and 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"));

Also, this attribute will finally be used on an HTML element and I need it to be without any value, eg: <input data-rr-mask /> and another issue is that I have to add an empty string as value; otherwise, the application throws an error.

Is there a way to do it so that you don't get "data-rr-mask"='' inside the element

Answer 1

EDIT (based on comments, OP is actually looking for data attributes to be resolved without any value, on the generated HTML)

In order to eliminate the value entirely for the generated HTML element, as a user commented on my answer, you just need to use an empty string for your data-attribute/prop.

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>
  );
}

Here is a working example of it.

Here is a working example mixing both your requests.

---

(Original answer based on first request)

At first you must consider that every attribute you pass to a custom component, can then be found on components props .

So for example, if you pass a custom attribute on your App component named data-rr-mask you can then found it, under your App 's props:

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

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


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

And then again, in your MySecondCustomComponent under its props you can find your custom attribute.

Answer 2

In my understanding a prop without a value is a boolean prop with value true.

So that means

<div someProp />

is the same as

<div someProp={true} />

Try if the following solves your problem:

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

See https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes for more information on boolean HTML attributes.