)タイトルが明確になる可能性がありますが、これは本当に私が思いつくことができる最高のものです。子どもがレンダリングの外で反応する(
したがって、Reactでフィルタされたテーブルコンポーネントを作成しようとしています。しかし、私はフィルタをテーブル自体の定義から独立して定義したい。だからここに私がやっていることがあります。
私はフィルタコンポーネント作成:var Table = React.createClass({
filterChanged : function (column, value) {
//this will be wired as a updateTable prop for the Filter
},
render : function() {
//I am trying not to define a filter here,
//I am trying to use the previously-defined Filter component.
//I want the Table component to remain generic and re-usable,
//with optional filters.
var thisComponent = this;
//I can have as many filters as I want.
var filterToRender = React.Children.map(this.props.children, function (child) {
var filterUI;
if (child.type.displayName === 'Filter') {
filterUI = React.cloneElement(child, {updateTable : thisComponent.filterChanged});
}
return (<div>{filterUI}</div>);
});
//along with the rest of the table UI,
return (<div>
<table>bla bla</table>
{filterToRender}
</div>);
}
});
その後、私のメインページに、私はこのようにそれをレンダリング:
ReactDOM.render((<Table>
<Filter columnName='status'></Filter>
</Table>), document.getElementById('appHolder'));
その後
var Filter = React.createClass({
handleChange : function (value) {
this.props.updateTable(this.props.columnName,value);
},
render : function() {
//an input that will report its value to this.handleChange
}
});
を、私は表コンポーネントを作成します
これはうまく描画されます。変更機能も有線であるようです。しかし、フィルタ値が変更されるたびにテーブルのfilterChangedメソッドがトリガされ、回数が増えます。最初に変更すると、2回トリガされます。 2回目の変更、6回; 3回目の変更、14回。
奇妙で凄い。私はここで間違って何をしていますか?
コードは問題なく表示されますが、バグを再現できる例を公開できますか? – damio
'this.prop.children.map(...)'だけでいいのではないですか?鍵を持っていない ' 'の問題かもしれませんか?私はあなたのコードではっきりと間違いがないようにピン止めしていますが... –
Scarysize