[英]React - nothing was returned from render
I have a component that needs to either render one link or if the item is an array, render each item in the array, separated by a '/'. 我有一个需要渲染一个链接的组件,或者如果该项目是一个数组,则渲染该数组中的每个项目,并用'/'分隔。
I am getting the error that nothing is returned from my render component. 我收到以下错误消息:我的渲染组件未返回任何内容。 I think it's because i'm using an if else statement but i'm not sure.
我认为这是因为我使用的是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 }} />
)
}
}
Your renderArray() method does not currently return anything. 您的renderArray()方法当前不返回任何内容。 Try updating it to something like:
尝试将其更新为以下内容:
renderArray (items) {
return items.map((item, key) => {
return (
<a href={item.link} title={item.text} /> + '/'
)
})
}
Since your are using forEach
for looping, it doesn't return anything in this case. 由于您使用
forEach
进行循环,因此在这种情况下不会返回任何内容。
You can use map
function for looping. 您可以使用
map
功能进行循环。
renderArray (items) {
return items.map((item, key) => {
return (
<a href={item.link} title={item.text} /> + '/'
)
})
}
OR You can use 或者您可以使用
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.