2016-09-13 6 views
0

リアクション0.14を導入stateless functional componentsステートレス機能コンポーネントを反応させるdefaultProps関数

あなたはまだ機能

上の特性として、それらを設定することにより、.propTypes.defaultPropsを指定することしかし、私は、それが設定されていない場合(インスタンスごと)ランダムな値に小道具の1を初期化したいです。 defaultPropsがオブジェクトだけを受け入れるなら、私はそれをすることができません。関数を使用して初期化する方法はありますか、または完全なReactコンポーネントを作成する必要はありますか?

+0

'var value = props.value ||あなたの関数内のrandomValue(); '? –

+0

@FelixKlingコンポーネントを再インスタンス化せずに小道具を変更することはできませんか?なぜなら、コンポーネントが再レンダリングされると、同じ値を使用したいからです。しかし、ステートレス機能コンポーネントが決して再レンダリングされない場合、それはうまくいくでしょう。 – mpen

答えて

0

これを行う最も簡単な方法は、Andrewが述べたように、デフォルトのpropをランダム値として設定することです。

設定されている場合、このデフォルトはオーバーライドされているため、説明したように動作します。

関数を使用してデフォルト値を設定する場合は、基本的に同じ割り当てです。

Component.defaultProps = { 
    someProp = fxnRandomValue() 
} 

EDIT:

すべてのインスタンスは、本当にこの小道具の値をランダム化することを確認するために、私はあなたがデフォルトで完全に小道具やコンポーネント内の割り当てを行うスキップ設定を示唆しています。例えば。

import { withState } from "recompose"; 

var enhance = withState("someProp", "updateSomeProp", (props) => props.someProp || randomValue()); 
var MyComponent = enhance(function(props) { 
    // This is your stateless component. 
    return <div>{props.someProp}</div>; 
}); 

これは基本的に状態が含まれているラッパーコンポーネントを作成します。あなたはrecomposeライブラリを使用する場合

const statelessComp = ({ prop }) => { 
    prop = prop || fxnRandomValue(); 
    return (
    ... 
) 
} 
+0

申し訳ありませんが、私ははっきりとは思わなかった。私はそれぞれのインスタンスに対してランダムな値が必要です。コンポーネントが最初にレンダリングされた後も値は変更されませんが、各インスタンスには独自の固有の値が必要です。私はあなたのソリューションがすべてのインスタンスに対して1つの値を作成すると確信しています。 – mpen

+0

必ずしもそうではありません。それは、あなたのランダム化機能がどのように機能するかによって異なります。 'defaultProps'は、関数が各インスタンスを作成するたびに呼び出されます。ただし、他の場所ではランダムではないかと心配している場合は、関数内で代入を行うこともできます。 – Cent

+0

'prop = prop || fxnRandomValue()を実行すると、すべての再レンダリングで異なる乱数値が返されます。初めてインスタンス化された後は修正する必要があります。また、 'Component.defaultProps'は静的なプロパティであり、関数ではないので、これまでに呼ばれていません。 – mpen

1

は、あなたがこのようなソリューションを実現することができます。 somePropが未定義の場合、状態はランダム値で初期化されます。

関連する問題