反应在不应该的地方创建跨度答案

【问题标题】：React creating span where it shouldn't反应在不应该的地方创建跨度
【发布时间】：2017-01-17 12:37:36
【问题描述】：

我有一个组件来显示一种目录。我正在努力应对，因为它正在创建一个跨度标签，据我所知，它不应该。

渲染函数为：

render() {
         return(
            <ul>
                {
                    this.state.contents.map(function(li, i) {

                        let subItems = li.subItems.map(function(subLi, j) {
                            return (
                                <li>
                                    <span>{subLi.title}</span>
                                </li>
                            )
                        }, this);

                        return (
                            <li tabIndex={i}>
                                <span><i class="fa fa-caret-right" />{li.title}</span>
                                <ul class="subitens">
                                    {subItems}
                                </ul>
                            </li>
                        );
                    }, this)
                }
            </ul>
        );

{li.title} 行正在创建以下结构：

<span>
    <i></i>
    <span>Parent 1</span>
</span>

我想：

<span><i></i> Parent 1</span>

我的文本周围的 span 正在与我的 CSS 混淆。

我用小提琴把它包起来：https://jsfiddle.net/fpcvzsLo/

关于我哪里出错了有什么想法吗？

谢谢！

【问题讨论】：

也有同样的问题，但这就是反应的工作方式。它将所有文本包装在跨度内，而不是创建文本节点。不确定是否可以修复。
stackoverflow.com/questions/24469474/…
:( 谢谢 degr，我以为我弄错了一些基本的 JSX...
试试这个：{li.title}' dont use the span`
我实际上在我的项目中使用react-html-attrs 插件，所以这应该不是问题（粘贴到 jsfiddle 时忘记了）。我尝试了 className 并得到了相同的结果

标签： javascript reactjs jsx

【解决方案1】：

正如@degr 所说，这是旧反应版本的一个已知问题。它会随每个文本发出标签。

我所做的只是将我的 React 更新到 0.15 并且它可以工作。

谢谢！

【讨论】：

将文本包裹在 span 中的原因是它没有包含在
标记中。您使用
作为纯粹的占位符来显示图像/项目符号图像。如果您将标题包装在
中，它也不会输出跨度。很高兴你来对了。

【解决方案2】：

尝试以下方法：

                      return (
                                <li tabIndex={i}>
                                    <span className="fa fa-caret-right">
                                        {li.title}
                                     </span>
                                    <ul className="subitens">
                                        {subItems}
                                    </ul>
                                </li>
                            );

https://jsfiddle.net/fpcvzsLo/4/（包括 Font Awesome 以显示）

输出：

<span class="fa fa-caret-right" data-reactid=".0.1.0">Parent 2</span>

【讨论】：

如您所见，文本变为斜体... 不是我想要的。 应该只用于图标
是的，然后这就是 CSS 接管您想要的外观和感觉的地方。我刚刚从您的示例中工作:) 无论如何，您找到了解决方案。
啊，我明白为什么它变成斜体的错误了，我认为那是一个 li 标签，将其更改为将用作占位符
我添加了 Font Awesome 来向您展示它的外观。您需要稍微调整 CSS 以摆脱父（或子）的默认项目符号点。我知道升级到 0.15 解决了你所有的问题，但我认为这将帮助其他现在没有能力升级的人
非常感谢@zerohero。这实际上确实专门解决了这个问题。我不会接受，因为我认为更新 react 更好，因为它会停止反应垃圾邮件“跨度”，好吗？但我真的很感谢你的回答。它让我换个角度看