0
コンポーネントの中から、ときどき使用しようとしているFieldsコンポーネントがあります。私は単純化されたモデルで以下のスニペットを追加しました。FieldArrayコンポーネント内のReduxフォームフィールドコンポーネントの使用
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { reduxForm, Fields, FieldArray, reducer as formReducer } from 'redux-form';
const reducers = {
form: formReducer
};
const reducer = combineReducers(reducers);
const store = createStore(reducer);
const renderSharedComponent = (fields) => {
console.log(fields);
return (<div>Shared Component</div>);
};
const renderHashes = ({ fields }) => (
<div>
{
fields.map((field) => (
<Fields
key={ field }
names={ [`${field}.value`, `${field}.valueIsRegex`] }
component={ renderSharedComponent }
/>
))
}
</div>
);
const ReactComponent =() => (
<div>
<FieldArray
name="hashes"
component={ renderHashes }
/>
<Fields
names={ ['value', 'valueIsRegex'] }
component={ renderSharedComponent }
/>
</div>
);
const ReduxForm = reduxForm({
form: 'default',
initialValues: {
hashes: [{}]
}
})(ReactComponent);
ReactDOM.render((
<div>
<Provider store={ store }>
<ReduxForm />
</Provider>
</div>
), document.getElementById('content'));
Iは、それ自体でFieldsコンポーネントを使用するとき、renderSharedComponent内側からfields引数は以下の形式を有する：
{
value: { input: {...}, meta: {...} },
valueIsRegex: { input: {...}, meta: {...} },
names: [ 'value' , 'valueIsRegex' ]
}
IはFieldArray成分、内側からfields引数内部Fieldsコンポーネントを使用renderSharedComponentは、以下の形式を有する。
{
hashes: [
{
value: { input: {...}, meta: {...} },
valueIsRegex: { input: {...}, meta: {...} }
}
],
names: [ 'hashes[0].value' , 'hashes[0].valueIsRegex' ]
}
のコンポーネント内にFieldsコンポーネントを別の名前で使用する場合は（たとえばpathsとしましょう）、namesプロパティがそれに応じて変更されます（例： names: [ 'paths[0].value' , 'paths[0].valueIsRegex' ]）。
私はvalueとvalueIsRegexオブジェクトを一般的な方法で上記のいずれのケースもサポートするようにしようとしています。
今はフィールドを決定するためにRegExを使用する関数を作成しました。しかし、私は誰かがこれを行う良い方法を知っているのだろうかと思っていました（たぶん、Redux Formユーティリティがあり、ドキュメンテーションを読んでいなかったかもしれません）。