Question

我有一个组件，需要渲染一个链接，或者如果该项目是一个数组，则渲染该数组中的每个项目，并用'/'分隔。

我收到以下错误消息：我的渲染组件未返回任何内容。我认为这是因为我使用的是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 }} />
    )
  }
}

Answer 1

您的renderArray（）方法当前不返回任何内容。尝试将其更新为以下内容：

[FSCrumb]

Answer 2

由于您使用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} /> + '/'
    )
  })
}

反应-渲染未返回任何内容

2 个答案: