Question

我有以下内容：

const errorMessage = ({meta}) =>
  <div>
    {meta.error && meta.touched && <div className="alert alert-info" role="alert">{meta.error}</div>}
  </div>

如果我删除上面的外部div包装器，我会收到错误...有没有办法让errorMessage在没有额外DIV的情况下工作？

由于

Answer 1

您可以使用{}：

这样写

const ErrorMessage = ({meta}) => {

    if(meta.error && meta.touched)
        return <div className="alert alert-info" role="alert">{meta.error}</div>

    return null;
}

或者移除外部div并删除{}，使用ternary operator来设置条件，如下所示：

const ErrorMessage = ({meta}) => meta.error && meta.touched ? 
    <div className="alert alert-info" role="alert">{meta.error}</div>
    : null;

您需要使用ErrorMessage代替errorMessage，请在此处查看原因：

Html is not rendering in the browser - React js

检查 this answer 删除外部div时失败的原因：

const errorMessage = ({meta}) => 
    {meta.error && meta.touched && <div className="alert alert-info" role="alert">{meta.error}</div>}

Answer 2

您可以这样写：

const errorMessage = ({meta}) => {
return (meta.error && meta.touched) ? `<div className='alert alert-info' role='alert'>${meta.error}</div>` : null
}

React，有没有办法避免需要在div中包含div？

2 个答案: