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

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>}

如果 touched 是真的...那又怎样？知道结果，不知道过程...

Answer 1

如果您使用 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 方式来 return 跨度。

Answer 2

这实际上与 React 无关，它是 javascript 计算表达式的方式。

这是relevant docs

expr1 && expr2

Returns expr1 if it can be converted to false; otherwise, returns expr2. Thus, when used with Boolean values, && returns true if both operands are true; otherwise, returns false.

由于表达式不是布尔值，不能转换为 false（例如 null 或 undefined），它将 return 最后一个值，在本例中为span 里面有错误

而且，正如 Mayank 回答中提到的，JSX 只允许表达式。 if 被认为是语句，而不是表达式，因此在 JSX 中是不允许的。因此，您将看到 React 开发人员使用 javascript 的其他功能来取回该控制权。

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

Can't understand some codes in redux-form

javascript

reactjs

redux-form