我有一个 React.JS 组件,它将映射notes
要显示的变量。
然而,我遇到了没有笔记并收到错误的问题。解决这个问题的正确方法是什么?
这是代码:
import React, {Component} from 'react';
class List extends Component {
constructor(props){
super(props);
}
render(){
var notes = this.props.items.map((item, i)=>{
return(
<li className="listLink" key={i}>
<p>{item.title}</p>
<span>{item.content}</span>
</li>
)
});
return(
<div className='list'>
{notes}
</div>
);
}
}
export default List;
如果您想在至少存在一个注释时渲染注释,并在数组中没有注释时渲染默认视图,您可以将渲染函数的返回表达式更改为:
return(
<div className='list'>
{notes.length ? notes : <p>Default Markup</p>}
</div>
);
由于 JavaScript 中的空数组是 true,因此您需要检查数组的长度,而不仅仅是数组的布尔值。
请注意,如果您的items
prop 永远为空,这会导致异常,因为你会调用map
在空值上。在这种情况下,我建议使用 Facebook道具类型 https://github.com/facebook/prop-types要设置的库items
默认为空数组。这样一来,如果items
没有设置,组件不会损坏。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)