Нестандартные пользовательские атрибуты в ReactJS?

Question

Это касается нестандартных атрибутов. https://facebook.github.io/react/docs/tags-and-attributes.html

В реакции я это сделал:

React.createElement('div', {image:'blah', etc:'blah'}); 

мне нужно image и etc быть установлен на элементе с setAttribute, и мне нужно реагировать, чтобы использовать его ум, чтобы сохранить его, как он меняется.

Решение здесь https://stackoverflow.com/a/21654914/1828637 говорит, чтобы добавить его на componentDidMount, но это не решение. Атрибут не будет поддерживаться по мере его изменения с помощью среды реакции.

Можно ли вообще отреагировать на установку атрибута в моих собственных тегах?

Answer 1

В реакции 16 пользовательских атрибутов теперь можно

// Your code: 
<div mycustomattribute="something" /> 

// React 15 output: 
<div /> 

// React 16 output: 
<div mycustomattribute="something" /> 

react 16 custom attributes

Answer 2

Это решение основано на связанном ответе с использованием метода жизненного цикла React componentWillReceiveProps для обновления атрибутов элемента DOM с каждым изменением реквизита. Дополнительные сведения обо всех методах жизненного цикла см. В разделе http://facebook.github.io/react/docs/component-specs.html.

(С componentWillReceiveProps можно назвать чаще чем когда реквизит на самом деле изменить, вы можете сравнить реквизит, прежде чем на самом деле устанавливать их на узле.)

Я обеспечить скрипку вы можете играть с : https://jsfiddle.net/p4h267bo/ и соответствующая часть кода взята здесь:

var Hello = React.createClass({ 
    componentDidMount() { 
    this.mirrorProps(this.props); 
    }, 
    componentWillReceiveProps(nextProps) { 
    this.mirrorProps(nextProps); 
    }, 
    mirrorProps(props) { 
    var node = ReactDOM.findDOMNode(this); 
    node.setAttribute('name', props.name); 
    }, 
    render: function() { 
    return <div>Hello {this.props.name}</div>; 
    } 
}); 

Answer 3

Другой альтернативой является, чтобы изменить имя атрибута к чему-то, что среагировать поддерживает (такие как данных- * атрибуты):

render() { 
    return (
     <div data-image='blah' data-etc='blah' /> 
    ); 
} 

ссылку на других поддерживаемых атрибутов: https://facebook.github.io/react/docs/dom-elements.html