[英]React, is there a way to avoid needing to wrap a div inside a div?
I have the following: 我有以下几点:
const errorMessage = ({meta}) =>
<div>
{meta.error && meta.touched && <div className="alert alert-info" role="alert">{meta.error}</div>}
</div>
If I remove the outer div wrapper in the above I get an error... Is there a way to get errorMessage to work without the extra DIV? 如果我在上面删除了外部div包装器,则会收到错误消息...有没有办法让errorMessage在没有额外DIV的情况下工作?
Thanks 谢谢
You can write it like this by using {}
: 您可以使用
{}
来这样写:
const ErrorMessage = ({meta}) => {
if(meta.error && meta.touched)
return <div className="alert alert-info" role="alert">{meta.error}</div>
return null;
}
Or remove the outer div
and remove the {}
also, use ternary operator
to put the condition, like this: 或者删除外部
div
并同时删除{}
,使用ternary operator
放置条件,如下所示:
const ErrorMessage = ({meta}) => meta.error && meta.touched ?
<div className="alert alert-info" role="alert">{meta.error}</div>
: null;
You need to use ErrorMessage
instead of errorMessage
, check the reason here: 您需要使用
ErrorMessage
而不是errorMessage
,在这里检查原因:
Html is not rendering in the browser - React js HTML未在浏览器中呈现-React js
Check this answer why it was failing when you removed the outer div
: 检查以下答案,为什么在删除外部
div
时失败:
const errorMessage = ({meta}) =>
{meta.error && meta.touched && <div className="alert alert-info" role="alert">{meta.error}</div>}
You can write like this : 您可以这样写:
const errorMessage = ({meta}) => {
return (meta.error && meta.touched) ? `<div className='alert alert-info' role='alert'>${meta.error}</div>` : null
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.