"ref"までスクロールしようとしているときに何が問題なのかわかりません。私は怒っているような検索をしており、完全な意味を持つURLを見つけましたが、私のシナリオではうまくいかないでしょう。React .createClass()がスクロールしてref:scrollIntoViewが関数ではない
私が反応し、ルータ3.0.0とともに15.4.2を使用して反応するアプリを持っています。私はオプションのルートパラメータを取るコンポーネントへのルートを持っていて、それを使ってcomponentDidUpdate()の要素にスクロールしようとしています。私は
のscrollIntoViewは私がそのことを確認した機能
ではありません...カップル異なる方法を実装するが、私はエラーを取得)ref.scrollIntoView(の直近の実装を以下に試してみましたcomponentDidUpdate()の時点で "refコールバック"が存在します。
私はちょうど.createClass()を使用するような何かが欠けているのですが、クラス定義を使用するときに得られるメソッドがないか、まったく間違っていますか?
私はパッケージを使用するだけにジャンプすることができますが、このようなことは、私が気にしているようにネイティブであるときに何が起こっているのか理解できないことではありません。
同様のフローを維持しながら、問題を示すためにコードが簡略化されました。コードの構文に不一致があります。
APP
const App = React.createClass({
render() {
return (
<Router history={ appHistory }>
<Route path='home' component={ Home }>
<IndexRoute component={ Page } />
<Route path='page(/:itemIndex)' component={ Page } />
</Route>
<Route path='add-new-item' component={ AddNewItem } />
</Router>
)
}
});
HOME アクティブな指標に基づいて子供をレンダリングするナビゲーションバーを持つ単なるラッパーである
がコンポーネントである新しい項目を追加これはgoto/page/[新しく作成されたアイテムのインデックス]
PAGE
const Page = React.createClass({
getInitialState() {
return {
data: undefined,
scrollTo: parseInt(this.props.params.goalIndex) || undefined
};
},
componentWillMount() {
// this gets data and does a setState for data
},
componentDidUpdate() {
let { scrollTo } = this.state;
if(scrollTo && this['item-' + scrollTo]) {
this['item-' + scrollTo].scrollIntoView();
}
},
renderTiles() {
return this.state.data.map((item, index) => {
return (
<Item
key={ 'item-' + index }
ref={ node => this['item-' + index] = node }
>
<p>foo bar...</p>
</Item>
)
});
},
render() {
return (
<div>
{ this.state.data && this.renderTiles() }
</div>
);
}
});