[英]How to reference containing anchor tag in it's href attribute
我正在使用带有bootstrap的reactjs。 我想显示并折叠列表项(嵌套的无序列表)中的无序列表。 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'”
尝试在if语句中使用value.length> = 1。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.