Question

我正在使用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>}

如果感动是真的......那又怎样？我知道结果，但不知道过程...

Answer 1

这与React无关，这是javascript如何评估表达式。

以下是relevant docs

expr1 && expr2

如果可以转换为false，则返回expr1;否则，返回表达式2。因此，当与布尔值一起使用时，＆amp;＆amp;如果两者都返回true 操作数是真的;否则，返回false。

由于表达式不是布尔值，并且无法转换为false（例如null或undefined），因此它将返回最后一个值，在本例中为span它中的错误

而且，正如Mayank回答提到的那样，JSX只允许表达式。 if被视为语句，而不是表达式，因此在JSX中不允许。因此，您将看到使用javascript的其他功能的反应开发者来恢复该控制。

Answer 2

如果您使用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方式返回范围。

无法理解redux-form中的一些代码

2 个答案: