无法理解一些代码形式

我正在使用一些来自redux-form文档的示例代码，并且我有一些代码在renderField函数中不能理解。无法理解一些代码形式

const renderField = ({ input, label, type, meta: { touched, error } }) => { 
    return (
    <div> 
     <label>{label}</label> 
     <div> 
     <input className="form-control" {...input} type={type}/> 
     {touched && error && <span>{error}</span>} 
     </div> 
    </div> 
)

如果碰到我不明白下面

{touched && error && <span>{error}</span>}

代码是真的......什么？我知道结果，但不知道过程...

来源

2017-02-28 Nyeon Kim

如果触摸并且存在错误，请评估为' {error}'。基本上显示包含错误的跨度，如果触摸和错误存在。 – Li357

这与React无关，它是javascript评估表达式的方式。

这里是relevant docs

expr1 && expr2

返回expr1的，如果它可以被转换为假;否则，返回 expr2。因此，当与布尔值一起使用时，如果两个操作数均为true，则& &返回true;否则，返回false。

由于表达式不是布尔值，并且不能被转换为false（如null或undefined），它会返回的最后一个值，在此情况下与该错误的span在它

而正如Mayank回答所提到的，JSX只允许表达式。 if被视为语句，而不是表达式，因此在JSX中不允许。所以你会看到使用javascript的其他功能反应开发人员回到控制。

来源

2017-02-28 07:00:51 aarosil

如果你打破使用if else和ternary操作上面的代码，它看起来就像这样：

1. if(touched && error) 
     <span>{error}</span> 

2. if(touched) 
     if(error) 
     <span>{error}</span> 

3. {touched && error ? <span>{error}</span> : null}

它只是意味着，如果touched and error both are true then only render this span。

注意：if不允许在JSX里面使用，我用它来表示清晰的图像。如果你想使用if然后从render方法调用一个函数，在里面你可以用1和2的方法来返回span。

来源

2017-02-28 06:36:10

无法理解一些代码形式

回答

相关问题