React，有没有办法避免将 div 包裹在 div 中？

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

检查为什么当您移除外部 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 中？

React, is there a way to avoid needing to wrap a div inside a div?

javascript

reactjs

react-jsx

jsx