MateralizeCSS (вкладки, складные элементы, кнопки) работают некорректно: React.js (render) - PullRequest
Новая
       42

MateralizeCSS (вкладки, складные элементы, кнопки) работают некорректно: React.js (render)

0 голосов
/ 07 июня 2019

Я пытаюсь создать несколько разборных, и внутри каждой разборной есть вкладка, вкладка имеет 3 столбца (легкий, средний, жесткий).

и у меня есть свертываемые данные внутри моего состояния, и я пытаюсь перебрать свое состояние и отобразить складываемые объекты, внутри которых присутствуют вкладки.

мое состояние похоже на 

{ 
  collapsibles: [
      {tabs_data: {'href': 'something1', 'name': 'something1'}},
      {tabs_data: {'href': 'something2', 'name': 'something2'}},
      ...
   ]
}

и я пытаюсь сделать это как .. 

   <ul className="collapsible">
            {this.state.collapsibles.length > 0 ? (this.state.collapsibles.map(((data_dict, key) => (
                <CategoryCollapsible key={key} category={data_dict} />
            )))) : null}
   </ul>

CategoryCollapsible - это простой <li> элемент складного элемента. 

import React, { Component } from 'react'
export default class CategoryCollapsible extends Component {
render() {
    return (
        <li id={this.props.category.name}>
            <div className="collapsible-header">{this.props.category.name}</div>
            <div className="collapsible-body">
                <div className="row">
                    <div className="col s12">
                        <ul className="tabs">
                            <li className="tab col s3"><a href={"#easy" + this.props.category.name} >Easy</a></li>
                            <li className="tab col s3"><a href={"#medium" + this.props.category.name} >Medium</a></li>
                            <li className="tab col s3"><a href={"#hard" + this.props.category.name} >Hard</a></li>
                        </ul>
                    </div>
                    <br />
                    <div id={"easy" + this.props.category.name} className="col s12">1</div>
                    <div id={"medium" + this.props.category.name} className="col s12">2</div>
                    <div id={"hard" + this.props.category.name}  className="col s12">3</div>
                </div>
            </div>
        </li>
    )
}
}

проблема в том, что 1, 2, 3 должны быть скрыты, но они просто появляются, как на картинке. Интересно, что когда я не рендерил его внутри цикла, он отлично работает. что с ним?

a

1 Ответ

1 голос
/ 07 июня 2019

Возможно, вы забыли позвонить по следующему номеру при обновлении компонента? 

var elems = document.querySelectorAll('.collapsible');
var instances = M.Collapsible.init(elems, options);
...