77

その背後にはさまざまな理由がありますが、JSX の要素にカスタム属性を単純に追加するにはどうすればよいのでしょうか?

4

11 に答える 11

79

編集：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/140

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

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

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

于 2015-07-07T15:50:14.843 に答える
51

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

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

そしてレンダリングメソッドで：

<MyComponent {...myAttr} />
于 2016-11-08T14:02:11.090 に答える
10

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

ここで私のアンサーを参照してください： Stackoverflow

于 2015-11-22T22:18:15.400 に答える
4

反応でSVGを使用しようとしたときに、この問題に何度も遭遇しました。

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

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';

反応の使用を開始する前にこれが含まれている/インポートされている限り、機能するはずです。

于 2015-07-08T18:43:25.967 に答える
1

使用している 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 の参照ドキュメント

于 2016-09-07T17:37:09.463 に答える
0

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

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 要素に属性を追加するにはどうすればよいですか?

于 2018-02-15T23:36:14.330 に答える