web-dev-qa-db-ja.com

JSXでカスタムhtml属性を追加する方法

その背後にはさまざまな理由がありますが、JSXの要素にカスタム属性を単純に追加する方法は疑問です。

javascripthtmlnode.jsreactjsreact-component
50
Andrey Borisko

編集：React 16を反映するように更新されました

カスタム属性はReact 16でネイティブにサポートされています。つまり、次のように、カスタム属性を要素に追加するのは、render関数に追加するのと同じくらい簡単になります。

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

多くのための：
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-attributes-in-react-16.html

前の回答（React 15以前）

現在、カスタム属性はサポートされていません。詳細については、この未解決の問題を参照してください： https://github.com/facebook/react/issues/14

回避策として、componentDidMountで次のようなことができます。

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

https://jsfiddle.net/peterjmag/kysymow0/ を参照してください。 （ このコメント のシラニドの提案に触発されました。）

56
peterjmag

ES6スプレッド演算子を使用して属性を追加できます。

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

およびrenderメソッド：

<MyComponent {...myAttr} />
39
Spadar Shut

myAttrという名前のカスタム属性を値myValueで渡したい場合、これは機能します。

<MyComponent data-myAttr={myValue} />
18
Luca Fagioli

「is」属性を使用して、要素のReact属性ホワイトリストを無効にできます。

ここで私のanwserを参照してください： Stackoverflow

10
Christian Steinmann

ReactでSVGを使用しようとすると、この問題に何度も遭遇しました。

私はかなり汚い修正を使用することになりましたが、このオプションが存在することを知っておくと便利です。以下では、SVG要素でvector-effect属性の使用を許可します。

import SVGDOMPropertyConfig from 'react/lib/SVGDOMPropertyConfig.js';
import DOMProperty from 'react/lib/DOMProperty.js';

SVGDOMPropertyConfig.Properties.vectorEffect = DOMProperty.injection.MUST_USE_ATTRIBUTE;
SVGDOMPropertyConfig.DOMAttributeNames.vectorEffect = 'vector-effect';

反応を使用する前にこれが含まれる/インポートされる限り、動作するはずです。

4
rbhalla

使用しているReactのバージョンによっては、このようなものを使用する必要がある場合があります。近い将来、Facebookが文字列参照の廃止を検討していることを知っています。

var Hello = React.createClass({
    componentDidMount: function() {
        ReactDOM.findDOMNode(this.test).setAttribute('custom-attribute', 'some value');
    },
    render: function() {
        return <div>
            <span ref={(ref) => this.test = ref}>Element with a custom attribute</span>
        </div>;
    }
});

React.render(<Hello />, document.getElementById('container'));

Facebookの参照ドキュメント

1
Dixon Minnick

クリックイベントでコンソールに属性値を表示する

//...
   alertMessage (cEvent){
           console.log(cEvent.target.getAttribute('customEvent')); /*display attribute value */
        }
//...

単純なadd customAttribute renderメソッドでの希望通り

render(){
    return <div>
//..
    <button customAttribute="My Custom Event Message" onClick={this.alertMessage.bind(this) } >Click Me</button>
            </div>
        }
//...
1
GMK Hussain

これを正確に妨げているものに応じて、現在の実装を変更する必要のない別のオプションがあります。プロジェクトのルートで.tsまたは.d.tsファイル（どちらかわからない）を使用して、プロジェクトで augment React ができるはずです。次のようになります。

declare module 'react' {
    interface HTMLAttributes<T> extends React.DOMAttributes<T> {
        'custom-attribute'?: string; // or 'some-value' | 'another-value'
    }
}

別の可能性は次のとおりです。

declare namespace JSX {
    interface IntrinsicElements {
        [elemName: string]: any;
    }
}

JSX |タイプチェック を参照してください

それをdeclare global {でラップする必要があるかもしれません。私はまだ最終的な解決策を見つけていません。

参照： TypeScript/JSXの既存のHTML要素に属性を追加するにはどうすればよいですか？

0
jedmao

es6を使用している場合、これは動作するはずです。

<input {...{ "customattribute": "somevalue" }} />
0
Squibly

次の方法でcomponentDidMount()ライフサイクルメソッドで実行できます

componentDidMount(){
    const buttonElement = document.querySelector(".rsc-submit-button");
    const inputElement = document.querySelector(".rsc-input");
    buttonElement.setAttribute('aria-hidden', 'true');
    inputElement.setAttribute('aria-label', 'input');
  }
0
KARTHIKEYAN.A