时间戳

首页 > 解决方案 > JSX 组件 Lint 警告

javascript - JSX 组件 Lint 警告

问题描述

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>
        );

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

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

这样做时，linter 对这里的第二行变得疯狂。它期望在输入标签之后有一个 ) 并且对第二行中的几乎每个字符都有抱怨！

我确信这是一个非常简单的概念，我没有掌握，所以任何帮助将不胜感激。

标签： javascriptreactjs

解决方案

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

使用这个<></> 

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元素或任何不需要的 HTML 元素来封装您的 JSX。

推荐阅读