反应 - 渲染没有返回任何内容

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() 方法当前不返回任何内容。尝试将其更新为以下内容：

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