Question

好吧，我正在努力弄清为什么我的React元素数组没有呈现。最终，我想做的是从我们的代码库中消除dangerouslySetInnerHtml的使用，该代码库被用来允许在长文本字符串的中间包含<strong>标签。我还没有找到任何预先准备好的解决方案，所以我正在构建自己的解决方案（也可以听到有关替代方案的消息）。

我尝试实现的解决方案是使用while循环创建<span>和<strong>标签的数组。这是我创建数组的辅助函数：

export const alternateBold = ({ primaryStrings = [], secondaryStrings = [] }) => 
  {
  const content = []
  while (primaryStrings.length || secondaryStrings.length) {
    if (primaryStrings.length) {
      const textVal = primaryStrings.shift()
      content.push(<span key={ textVal }>{ textVal }</span>)
    }

    if (secondaryStrings.length) {
      const boldVal = secondaryStrings.shift()
      content.push(<strong key={ boldVal }>{ boldVal }</strong>)
    }
  }
  return content
}

content此时包含如下内容：

{
  $$typeof: Symbol(react.element),
  key: "text content of the tag",
  props: {
    children: "text content of the tag",
    key: (...)
  },
  get key: ƒ (),
  __proto__: Object,
  ref: null,
  type: "span",
  _owner: ReactCompositeComponentWrapper {_currentElement: {…}, _rootNodeID: 0, _compositeType: 0, _instance: BannerSection, _hostParent: ReactDOMComponent, …},
  _store: {validated: false},
  _self: null,
  _source: null,
  __proto__: Object,
}

因此，我的困惑源于以下事实：此元素列表未呈现（当传入此帮助程序的数组时，下面的<div>标签为空。这是我调用该帮助程序的静态方法前提是存在属性textGroups的情况下使用上述函数。当传递普通字符串（{ textGroup }）时，itemContent.text会按预期呈现：

static renderTagDefault (itemContent) => {
    const textGroup = {}.hasOwnProperty.call(itemContent, 'textGroups') ?
              alternateBold(itemContent.textGroups)
              : itemContent.text
    return (
        <div>
            { textGroup }
        </div>
    )
}

哪个由单独的静态方法'renderTitle'调用：

static renderTitle(innerText, callToAction) {
    return (
        <div>
            {
                innerText.map(
                    (key, i) => (
                            <div key={ i }>
                                { BannerSection.renderTagDefault(key) }
                            </div>
                        )
                )
            }
        </div>
    )
}

在组件的render方法中调用哪个：

class BannerSection extends React.Component {
render() {
    const {
        className,
        innerText,
        callToAction
    } = this.props

    return (
        <section>
            <section>
                { BannerSection.renderTitle(innerText, callToAction) }
            </section>
        </section>
    )
}

没有错误，但是包装器为空。我没有看到此数组的创建/渲染与此处描述的内容之间有任何重要区别：https://codepen.io/gaearon/pen/jrXYRR?editors=0011

任何帮助，将不胜感激。

未使用JSX渲染的React Elements数组

0 个答案: