2017-12-30 31 views
1

私は反応16.0を使用しています。カスタムオブジェクトプロパティを要素に割り当てる方法はありますか?

カスタムオブジェクトプロパティを要素に割り当ててその値を取得します。

以下の通りです。 (https://jsfiddle.net/69z2wepo/96660/)もちろん動作しません。

class Test extends React.PureComponent { 
    render() { 
     let numbers = { number:1, number2:2, number3:3 }; 
     return <div numbers={numbers} onClick={(event) => console.log(event.target.numbers.number)}>Test</div>; 
    } 
} 

ReactDOM.render(
    <Test/>, document.querySelector('body') 
); 

いい方法があるかどうかを知りたい。ありがとう。

+2

と、その後のことができます。bindその値onClickハンドラ内でその値にアクセスしたい場合。なぜあなたはそれをしたいのですか?コンポーネントを作成して小道具を渡すのはなぜですか?これが反応する方法です –

+1

これを行う目的がレンダリングの内部でバインドされないようにする場合は、このhttps://stackoverflow.com/questions/45053622/how-to-avoid-binding-insideをご覧ください。 -render-method/45053753#45053753 –

+0

DOMの旅行は高価です。反応のパターンを壊し、[diffing and Reconciliationアルゴリズム](https://reactjs.org/docs/reconciliation.html)で中断することもできます。良い理由のために仮想DOMが使用されています:) –

答えて

1

あなただけが `データ - *`属性を使用して文字列を渡すことができますアクションハンドラ自体

const handler = (numbers, e) => { 
    console.log(numbers) 
} 
render() { 
    let numbers = { number:1, number2:2, number3:3 }; 
    return <div onClick={this.handler.bind(this, numbers)}>Test</div>; 
} 
+0

.bind()を使用するか、renderメソッドのarrow関数は、レンダリングメソッドが呼び出されるたびに新しい関数を作成するため、良い解決策ではありません。この練習を避けることについて多くの話があります。この質問を確認してください。https://stackoverflow.com/questions/45053622/how-to-avoid-binding-inside-render-method/45053753#45053753 –

関連する問題