Question

我正在将Reactjs与Bootstrap一起使用。我想显示并折叠列表项（嵌套的无序列表）中的无序列表。 Bootstrap具有折叠功能。如果使用锚标记，则可以使用值为“ collapse”的data-toggle属性，并且可以引用要在其href属性中显示或隐藏的部分。下面是Bootstrap文档示例。

我想引用其href属性中包含的锚元素.anchor标记中的subList函数根据传入的数组返回无序列表。因此，下一个标签或锚标签的同级标签将是ul标签，这就是我要显示和隐藏的内容。

认为下面的代码可以做到，但是它告诉我“ TypeError：无法读取未定义的属性'nextSibling'”。因此，此处似乎不允许引用“ this”。我是否有由于某种原因而看不到的错字，或者我的方法完全错误，而我所做的事情永远无法通过这种方式完成？

我已经研究了google，堆栈溢出和引导程序文档，但是似乎没有这样的示例，很难正确输入搜索词，以便我可以找到答案。

>

Bootstrap文档示例

<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
</a>

我的代码：

    const subList = (listArray) => {
        const output = [];
        for (const item of listArray) {
            output.push(<li>{item}</li>);
        }   
        return (<ul>{output}</ul>);
    };

    for (const [prop, value] of Object.entries(props.card)) {
        if(Array.isArray(value) && value.length > 1) {
            cardJsx.push(<li><strong>{prop}: </strong><a data-toggle="collapse" href={this.nextSibling}>more</a>{subList(value)}</li>);
        }
        else{
            cardJsx.push(<li key={prop}><strong>{prop}:</strong> {value}</li>);
        }
    }
    return <div><ul>{cardJsx}</ul></div>;

“ TypeError：无法读取未定义的属性'nextSibling'”

Answer 1

尝试在if语句中使用value.length> = 1。

如何引用在href属性中包含锚标记的引用

1 个答案: