Javascript 作出反应，在不应出现的地方创建跨度'；T

我有一个组件来显示一种目录。我正在与react抗争，因为它正在创建一个span标记，而在我的理解中，它不应该这样做

渲染功能包括：

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>
        );

render（）{
返回(

{
this.state.contents.map（函数（li，i）{
设subItems=li.subItems.map（函数（subLi，j）{
返回(

{subLi.title}

)
}，这个）；
返回(

{li.title}

{子项}


);
}，本页）
}

);

行

{li.title}

正在创建以下结构：

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

父1

我想：

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

Parent 1

我文本周围的

span

正在干扰我的CSS

我把它包在小提琴上：

你知道我做错了什么吗

谢谢！

请尝试以下操作：

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

返回(

{li.title}

{子项}


);

（包括要显示的字体）

输出：

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

父级2

正如@degr所说，这是旧版本react的一个已知问题。它会在每个文本中发出标记

我所做的只是将我的React更新为0.15，它就可以工作了

---

谢谢！

也有同样的问题，但这就是react的工作方式。它将所有文本包装在span中，而不是创建文本节点。不确定是否可以修复。：（谢谢degr，我认为我的一些基本JSX搞错了…试试这个：

{li.title}'不要使用

span`我实际上在我的项目中使用了react html attrs插件，所以这不应该是个问题（粘贴到JSFIDLE时忘记了）。我尝试使用className，得到了与您看到的相同的结果，文本get是斜体的…与我想要的不完全一样。这应该只适用于iconsYep，然后这就是CSS接管样式和您想要的外观的地方。我只是从您的示例开始工作：）无论如何，你找到了解决方案。啊，我看到了为什么它变成斜体的错误，我认为那是一个li标记，将其更改为将用作占位符。我添加了很棒的字体，以向你展示它的外观。你需要稍微调整CSS，以去掉父（或子）的默认项目符号。我知道升级到0.15解决了您的所有问题，但我认为这将帮助其他没有奢侈品的人立即升级。非常感谢@zerohero。这确实解决了这个问题。我不会接受，因为我认为更新react是一个更好的方法，因为它将停止react垃圾邮件“spans”，好吗？但我真的很感激你的回答。它让我从另一个角度看它之所以将文本包装在span中，是因为它不包含在

标记中。你使用

作为纯粹的占位符来显示图像/项目符号图像。如果你将标题包装在

中，它也不会输出span。很高兴你做对了。