reduxForm 7.0.4 Импорт тега <Field>внутри строкового значения из базы данных и вывод его на пользовательский интерфейс - PullRequest
Новая
       5

reduxForm 7.0.4 Импорт тега <Field>внутри строкового значения из базы данных и вывод его на пользовательский интерфейс

0 голосов
/ 01 января 2019

Я пытаюсь отобразить <Field> теги внутри строки из вызова выборки из базы данных в пользовательский интерфейс.Но когда я запускаю код, он отображает теги <Field> в виде строки вместо элементов Redux Form.

Вот ключ / значение из объекта базы данных, который я получаю: 

ConditionDescription: "Overall, (client) demonstrated a consistent performance on the WAIS-IV and received a Full-Scale IQ (FSIQ) score of <Field
name='wais-iv-fsiq-score' type='text' component='input'/> (<Field name='wais-iv-fsiq-percentile' type='text' component='input'/> percentile), which falls within in the <Field name='wais-iv-fsiq-range' type='text' component='input'/> range of functioning."

Вот мой код JSX: 

{t.IndexConditions.map(t => (
    <div key={t.Id}>
        <div className="flex test__list">
            <MaterialIcon icon="arrow_right" />
            <p>{t.ConditionDescription}</p>
        </div>
    </div>
))}

PS Я попытался использовать пакет синтаксического анализатора <p>{ReactHTMLParser(t.ConditionDescription)}</p>, и я получил ошибку - Неизвестный проп "компонент" в теге <field>.

1 Ответ

0 голосов
/ 10 января 2019

Вы должны создать функцию, которая генерирует эти поля для вас на основе ваших данных.Для нативных HTML-тегов вы можете использовать dangerouslySetInnerHTML, но это не рекомендуется.

Вы можете попробовать что-то вроде: 

{t.IndexConditions.map(t => (
    <div key={t.Id}>
        <div className="flex test__list">
            <MaterialIcon icon="arrow_right" />
            {t.fieldsList.length > 0 && t.fieldsList.map(field => (
              <div>
                <Field name={field.name} type={field.type} component={field.component} /> 
                {field.label} 
              </div>
            ))}
        </div>
    </div>
))}

Отредактировано: вы получаете Unknown prop "component", потому что <Field> не является нативным HTML-тегом

...