EDITAR: Actualizado para reflejar React 16

Los atributos personalizados se admiten de forma nativa en React 16. Esto significa que agregar un atributo personalizado a un elemento ahora es tan simple como agregarlo a una función de render , así:

 render() { return ( <div custom-attribute="some-value" /> ); }

Para más:
https://reactjs.org/blog/2017/09/26/react-v16.0.html#support-for-custom-dom-attributes
https://facebook.github.io/react/blog/2017/09/08/dom-atributos-en-react-16.html

Respuesta anterior (React 15 y anteriores)

Actualmente, los atributos personalizados no son compatibles. Consulte este problema abierto para obtener más información: https://github.com/facebook/react/issues/140

Como solución alternativa, puede hacer algo como esto en componentDidMount :

 componentDidMount: function() { var element = ReactDOM.findDOMNode(this.refs.test); element.setAttribute('custom-attribute', 'some value'); }

Consulte https://jsfiddle.net/peterjmag/kysymow0/ para ver un ejemplo práctico. (Inspirado en la sugerencia de syranide en este comentario ).

Puede agregar un atributo usando el operador de propagación ES6, por ejemplo

 let myAttr = {'data-attr': 'value'}

y en el método de renderizado:

 <MyComponent {...myAttr} />

Considere que desea pasar un atributo personalizado llamado myAttr con el valor myValue , esto funcionará:

 <MyComponent data-myAttr={myValue} />