Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

True custom attributes (e.g. Microdata) in React

Tags:

The site I am developing makes use of Microdata (using schema.org). As we are shifting development over to use React to render our views I have hit a blocker where React will only render attributes in the HTML spec however Microdata specifies custom attributes such as itemscope.

As I'm relatively new to React and haven't had chance to fully understand the core just yet, my question is what would be the best way to extend the functionality of react.js to allow for defined custom attributes, e.g., Microdata?

Is there a way of extending the attributes/props parser or is it a job for a mixin which checks all passed props and modifies the DOM element directly?

(Hopefully we'll be able to put together a drop in extension for everyone to provide support for this when a solution is clear.)

like image 834
Chris Pearce Avatar asked Feb 08 '14 16:02

Chris Pearce


People also ask

How do I add custom attributes in React?

To add custom HTML attributes in React, we can just add them as we do with regular HTML element attributes. We just add the custom-attribute custom attribute and it'll be rendered in the HTML. This works since React 16.

What are the attributes to a React create element?

created as React nodes support a few attributes/props that are affected by user interaction. These are: value , checked , and selected . React offers the key , ref , and dangerouslySetInnerHTML attributes/props that don't exist in DOM and take on a unique role/function.

What is a custom React component?

Components are independent pieces of functionality that you can reuse in your application, and are the building blocks of all React applications. Often, they can be simple JavaScript functions and classes, but you use them as if they were customized HTML elements.


2 Answers

You can also use "is" attribute. It will disable the attribute white-list of React and allow every attribute. But you have to write class instead of className and for instead of htmlFor if you use is.

<div is my-custom-attribute="here" class="instead-of-className"></div> 

Update React 16 custom attributes are now possible

In react 16 custom attributes are now possible

React 16 custom attributes

like image 173
Christian Steinmann Avatar answered Oct 24 '22 00:10

Christian Steinmann


It looks like these non-standard properties have been added to React

itemProp: MUST_USE_ATTRIBUTE, // Microdata: http://schema.org/docs/gs.html itemScope: MUST_USE_ATTRIBUTE | HAS_BOOLEAN_VALUE, // Microdata: http://schema.org/docs/gs.html itemType: MUST_USE_ATTRIBUTE, // Microdata: http://schema.org/docs/gs.html 

Note that properties have capital letter in the middle:

<div itemProp="whatever..." itemScope itemType="http://schema.org/Offer"> 

will generate proper lowercase attributes as result.

like image 25
Reggie Pharkle Avatar answered Oct 24 '22 00:10

Reggie Pharkle