Foundation Accordion 在 React 中不起作用
Foundation Accordion not working in React
我在我的反应组件中使用基础手风琴。
因此,如果让组件呈现静态,则此代码有效 HTML 但是,如果我通过循环执行此操作,则手风琴不可点击。
UL 反应代码:
return (
<ul className="accordion" data-accordion data-allow-all-closed>
this.state.test.map((data,index) => {
return (<LI id={data.ID} value={data.Intro} />)
}
</ul>
)
李码
return (
<li className="accordion-item" data-accordion-item key={this.props.id}>
<a href="#" className="accordion-title">{this.props.value}</a>
<div className="accordion-content" data-tab-content>
<strong>{this.props.value}</strong>
<p>Test</p>
</div>
</li>
)
ComponentDidMount
new Accordion($(".accordion"), {
slideSpeed: 500,
multiExpand: true
});
fetch("URL")
.then(res => res.json())
.then(
(result) => {
this.setState ({
isLoaded: true,
items : [
{ ID: 1, Intro: "Label sdf1" },
{ ID: 2, Intro: "Label 2" },
{ ID: 3, Intro: "Label 3" }
]
})
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
构造函数
构造函数(道具){
super(props);
this.state = {
alerts:[],
items:[],
}
}
我编辑了@Pavelcode here 来复制我的问题
您的 LI
组件标记损坏,<a>
没有结束标记。
应该是<a href="#" className="accordion-title">{this.props.value}</a>
.
编辑:
解决方案在这个沙盒中:https://codesandbox.io/s/m76m5376ly?fontsize=14
请注意,与 React 一起使用时,Foundation 必须以文档中描述的多种方式之一进行初始化。在此示例中,我使用 componentDidMount
来初始化手风琴。
我在我的反应组件中使用基础手风琴。
因此,如果让组件呈现静态,则此代码有效 HTML 但是,如果我通过循环执行此操作,则手风琴不可点击。
UL 反应代码:
return (
<ul className="accordion" data-accordion data-allow-all-closed>
this.state.test.map((data,index) => {
return (<LI id={data.ID} value={data.Intro} />)
}
</ul>
)
李码
return (
<li className="accordion-item" data-accordion-item key={this.props.id}>
<a href="#" className="accordion-title">{this.props.value}</a>
<div className="accordion-content" data-tab-content>
<strong>{this.props.value}</strong>
<p>Test</p>
</div>
</li>
)
ComponentDidMount
new Accordion($(".accordion"), {
slideSpeed: 500,
multiExpand: true
});
fetch("URL")
.then(res => res.json())
.then(
(result) => {
this.setState ({
isLoaded: true,
items : [
{ ID: 1, Intro: "Label sdf1" },
{ ID: 2, Intro: "Label 2" },
{ ID: 3, Intro: "Label 3" }
]
})
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
构造函数
构造函数(道具){
super(props);
this.state = {
alerts:[],
items:[],
}
}
我编辑了@Pavelcode here 来复制我的问题
您的 LI
组件标记损坏,<a>
没有结束标记。
应该是<a href="#" className="accordion-title">{this.props.value}</a>
.
编辑:
解决方案在这个沙盒中:https://codesandbox.io/s/m76m5376ly?fontsize=14
请注意,与 React 一起使用时,Foundation 必须以文档中描述的多种方式之一进行初始化。在此示例中,我使用 componentDidMount
来初始化手风琴。