Question

React的新手，并试图将我的头脑弄清楚。使用此处的指南进行一些基本的表单字段验证：

https://redux-form.com/8.2.2/examples/fieldlevelvalidation/

我有这个工作，但是我需要更改renderField组件的格式。

这很好：

renderField = (
        {
            input, label, type, meta: { touched, error, warning },
        },
    ) => (
        <div>
            <input {...input} placeholder={label} type={type} />
            {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
        </div>
        );

但是我需要从中删除封闭的，以进行以下操作：

renderField = (
        {
            input, label, type, meta: { touched, error, warning },
        },
    ) => ( 
            <input {...input} placeholder={label} type={type} />
            {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}    
        );

这样做时，短绒棉就此在第二行发疯了。输入标签后面应有一个），并且抱怨第二行中的几乎每个字符！

我敢肯定，这是一个我不了解的非常简单的概念，因此，我们将不胜感激。

Answer 1

在这种情况下，您可以替换为：

使用此<></>

renderField = (
        {
            input, label, type, meta: { touched, error, warning },
        },
    ) => ( 
           <>
            <input {...input} placeholder={label} type={type} />
            {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}    
           </>
        );

或

import react, {Fragment} from 'react';

    renderField = (
            {
                input, label, type, meta: { touched, error, warning },
            },
        ) => ( 
               <Fragment>
                <input {...input} placeholder={label} type={type} />
                {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}    
               </Fragment>
            );

这将避免呈现父div或用于封装JSX的任何不需要的HTML元素。

Answer 2

如果您不想将元素包装在div中，则可以使用Fragment，

 renderField = (
        {
            input, label, type, meta: { touched, error, warning },
        },
    ) => (
         <React.Fragment> 
            <input {...input} placeholder={label} type={type} />
            {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}    
         </React.Fragment>
        );

或者短语法是空标记，

 renderField = (
        {
            input, label, type, meta: { touched, error, warning },
        },
    ) => (
         <> 
            <input {...input} placeholder={label} type={type} />
            {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}    
         </>
        );

Answer 3

与JSX有关，您必须在末尾返回一个根，因此在上述情况下，您将在末尾返回多个DOM元素，这就是为什么它不起作用的原因。

read this了解更多信息。

如果您不希望任何span或div包围元素，那么如果您使用的是React 16或更高版本，则可以使用<React.Fragment></React.Fragment>来包围元素。

JSX组件棉绒警告

3 个答案: