0

質問

パラメータの順序を定義する API によって呼び出される ES7 関数を作成しています。

mapStateToProps(state, [ownProps]): stateProps

使用する必要がありますが、使用ownPropsしませんstate。最初のパラメーターが指定されていないか、読み取りまたは書き込みを試行するとエラー (「フェイル ファスト」) が発生するように関数定義を作成することはできますか?

これは機能しません

これは魅力的に見えますが、もちろん_有効な変数名です...:

function myMapStateToProps(_, ownProps) {
  // ...
}

もう少しコンテキスト

私の質問は、実際にはSkipping optional function parameters in JavaScriptのミラーです。

私の質問の文脈は、クリックされたときに何かをするボタンを実装するReactコンポーネントのペアを書いているということです。

内側のコンポーネントはボタン テキストを含むレイアウトを指定し、外側のコンポーネントはモーダルを表示し、react-redux のconnect関数を使用して内側のコンポーネントで構成されます。

function MyButton({ handleOpen }) {
  return (
    <Button onClick={handleOpen} className={s['cta-button']}>
      Button text that I want to configure
    </Button>
  );
}

const mapStateToProps = () => {
  return {};
};

const mapDispatchToProps = (dispatch) => {
  return {
    handleOpen: () => dispatch(doSomeStuff()),
  };
};

const MyButtonContainer = connect(
  mapStateToProps,
  mapDispatchToProps,
)(MyButton);

export default MyButtonContainer;

使用法は次のとおりです。

<MyButtonContainer />

私がやりたいことは、MyButtonContainer に渡されるプロパティを介して、ボタンに表示されるテキストを構成可能にすることです。

<MyButtonContainer text="Click me" />

状態を props ( ) にマップするために使用される関数の 2 番目のパラメーターを使用することでownProps、プロパティにアクセスできますがtext、状態からは何も必要ないので、わかりやすくするため、およびバグが発生する可能性を減らすために、mapStateToProps を記述します。最初のパラメーターが使用できないように機能します。

私はES7からトランスパイルしているので、標準のESは問題ありません。提案された拡張機能があれば、それらも使用できるかもしれません (webpack に感謝します)。

あるいは、React でこれを行うためのより良い方法があれば、その解決策も受け入れます。

ボタンのテキストを redux ストアに入れてみませんか?

これは技術的なオプションです。私はいくつかの理由でそれが好きではありません: - ボタン テキストは内部コンポーネントのプロパティです。HOC を使用してラップし、ボタン機能を提供していない場合は、プロパティとして直接指定するだけです。 redux ストアでは、多くのコーディング オーバーヘッドが発生します。レデューサー、ストア イニシャライザー、アクション クリエーターを作成する場合、より適切で簡単な方法が必要です。- 同じレンダリングされたページに複数のボタンをそれぞれ異なるテキストで表示したい - コンテナ クラスでプロパティを指定する必要があるとしても、それを表示するテキストにするのが最もきれいに見える

4

2 に答える 2

1

使用して_も問題ないはずです。その意図は明確であり、賢明な開発者が誤って使用するべきではありません。

最初の引数を削除する高階関数を使用できます。

function noState(fn) {
    return (state, ...rest) => fn(...rest); // I'm assuming the `this` context doesn't matter
}

myMapStateToProps = noState(ownProps => {
    …
});
于 2017-01-13T00:40:55.093 に答える