Фонд Аккордеон не работает в React - PullRequest
Новая
       11

Фонд Аккордеон не работает в React

0 голосов
/ 13 марта 2019

Я использую гармошку в своем реактивном компоненте.

Таким образом, этот код работает, если заставить компонент отображать статический 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>
)

код LI 

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

* 1014 застройщик *

Конструктор (реквизит) {

     super(props);
       this.state = {
           alerts:[],
           items:[],

       }

 }

Я отредактировал @Pavelcode здесь , чтобы повторить мою проблему

1 Ответ

1 голос
/ 13 марта 2019

Ваш компонент LI имеет разорванную разметку, <a> не имеет закрывающего тега.

enter image description here

Должно быть <a href="#" className="accordion-title">{this.props.value}</a>.

РЕДАКТИРОВАТЬ:

Решение находится в этой песочнице: https://codesandbox.io/s/m76m5376ly?fontsize=14

Обратите внимание, что при использовании с React, Foundation должен быть инициализирован одним из многих способов, описанных вDocs.В этом примере я использовал componentDidMount для инициализации аккордеона.

...