いくつかの小道具を受け取るreactコンポーネントがあります。これらの小道具は、使用可能にするために別の構造にマップする必要があります（selectの場合、ストアとは異なる構造が必要です）。ライフサイクルのどの時点でこれを行うべきか疑問に思っています。
ドキュメントを読みました：https：//facebook.github.io/react/docs/component-specs.html、そしてレンダリング関数を純粋に保つことをお勧めします：
render（）関数は純粋である必要があります。つまり、コンポーネントの状態を変更せず、呼び出されるたびに同じ結果を返し、DOMからの読み取りやDOMへの書き込み、またはブラウザーとの対話を行いません。
今、私はそれがそうではなく、私がそれらを変更していないpropsので、マップすることはまだ大丈夫stateだと思います：
import React from 'react';
export default class IndicatorSelect extends React.Component {
constructor(props) {
super(props);
}
render() {
const options = this.props.store.items.map(item => ({ value: item.id, label: item.name }));
return (
<div>Display the data in some way here: {options.value} {options.label}</div>
);
}
}
ThisComponent.propTypes = {
store: React.PropTypes.object.isRequired,
};
これは推奨される方法ですか、それとも親コンポーネントがこのコンポーネントに渡される小道具のフォーマットを担当する必要がありますか？または、これをライフサイクル方式で実行する必要がありますか、それともまったく異なる方法で実行する必要がありますか？
はい、@ selvagszのコメントは正しいです-あなたがそれを頻繁に行わない限り、props内部の正規化renderはそれほど悪くはありません。「多すぎる」場合はprops、を正規化するコンテナコンポーネントを作成し、レンダリングのみを処理するプレゼンテーションコンポーネントに渡します。
質問に答えるのは簡単ではありませんが、私が従う経験則は次のとおりです。
プレゼンテーションコンポーネントは、レンダリングのみを処理するように、可能な限り最も便利で正規化された方法で小道具を受け取る必要があります。
ただし、例のように正規化する場合、追加のコンテナコンポーネントを作成することは意味がありません。この時点では、オーバーヘッドが大きすぎます。小道具を変換することの苦痛を感じ始めたら、コンテナコンポーネントを作成して変換させます。または、すでにコンテナである場合は、親で実行します。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加