React - 渲染没有返回任何内容答案

【问题标题】：React - nothing was returned from renderReact - 渲染没有返回任何内容
【发布时间】：2019-06-19 00:46:37
【问题描述】：

我有一个组件需要呈现一个链接，或者如果项目是一个数组，则呈现数组中的每个项目，并用“/”分隔。

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

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您的 renderArray() 方法目前不返回任何内容。尝试将其更新为：

renderArray (items) {
    return items.map((item, key) => {
      return (
        <a href={item.link} title={item.text} /> + '/'
      )
    })
  }

【讨论】：

【解决方案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} /> + '/'
    )
  })
}

【讨论】：