Question

我正在尝试从数据库中提取对UI的字符串中的<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>
))}

P.S。我尝试使用解析器包<p>{ReactHTMLParser(t.ConditionDescription)}</p>，但遇到错误-<field>标签上的未知道具“ component”。

Answer 1

您应该创建一个函数，该函数根据您的数据为您生成这些字段。对于本机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标记

reduxForm 7.0.4从数据库导入字符串值内的<field>标签并将其输出到UI

1 个答案: