[英]React - nothing was returned from render
我有一个需要渲染一个链接的组件,或者如果该项目是一个数组,则渲染该数组中的每个项目,并用'/'分隔。
我收到以下错误消息:我的渲染组件未返回任何内容。 我认为这是因为我使用的是if else语句,但我不确定。
class Item extends React.Component {
constructor(props) {
super(props)
this.renderArray = this.renderArray.bind(this)
}
renderArray (item) {
const items = item
items.forEach((item, key) => {
return (
<a href={item.link} title={item.text} /> + '/'
)
})
}
render () {
const { item } = this.props
const { link, text, classes } = item
if (!link && text) {
return (
<span>
<br />
<strong dangerouslySetInnerHTML={{ __html: text }} />
</span>
)
}
const className = classNames(
classes
)
if (Array.isArray(item)) return this.renderArray(item)
return (
<a href={link} className={className} title={text} dangerouslySetInnerHTML={{ __html: text }} />
)
}
}
您的renderArray()方法当前不返回任何内容。 尝试将其更新为以下内容:
renderArray (items) {
return items.map((item, key) => {
return (
<a href={item.link} title={item.text} /> + '/'
)
})
}
由于您使用forEach
进行循环,因此在这种情况下不会返回任何内容。
您可以使用map
功能进行循环。
renderArray (items) {
return items.map((item, key) => {
return (
<a href={item.link} title={item.text} /> + '/'
)
})
}
或者您可以使用
renderArray (item) {
const items = item;
let contentToRender = [];
items.forEach((item, key) => {
contentToRender.push(
<a href={item.link} title={item.text} /> + '/'
)
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.