Question

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

渲染功能是：

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

行<span><i class="fa fa-caret-right" />{li.title}</span>正在创建以下结构：

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

我想：

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

我的文字周围span弄乱了我的CSS。

我把它包裹在一个小提琴上：https://jsfiddle.net/fpcvzsLo/

关于我出错的任何想法？

谢谢！

Answer 1

尝试以下方法：

                      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>

Answer 2

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

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

谢谢！

反应创建它不应该的范围

2 个答案: