javascript - 无法理解 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

这实际上与 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.

由于表达式不是 bool 值，不能转换为 false(例如 null 或 undefined)，它将返回最后一个值，在本例中为span 包含错误

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