UPD: React не возвращает HTML элементов из функций - PullRequest
Новая
       10

UPD: React не возвращает HTML элементов из функций

1 голос
/ 16 января 2020

Мне нужно создать вложенное аккордеонное меню из JSON в React.Component. Каждый ключ объекта объектов должен быть кнопкой, которая показывает вложенные элементы при нажатии (если значение не равно нулю). У меня есть две функции, которые создают кнопки для ключей и скрытые элементы div для значений, но они не отображаются в HTML коде.

menuItems. json

{
  "item1": {
    "nestedItem1": null,
    "nestedItem2": {
      "deeplyNetstedItem1": null
    }
  },
  "item2": null,
  "item3": null,
  "item4": {
    "nestedItem3": null
  }
}

DropdownList.jsx (UPD) 

import React from "react";

class DropdownList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.props.data
    };
    this.createListData = this.createListData.bind(this);
    this.createButton = this.createButton.bind(this);
    this.createHidden = this.createHidden.bind(this);
  }

  createButton = (item) => {
    return <button className='accordion'>{item}</button>
  }

  createHidden = (item) => {
    return <div className='panel'>{item}</div>
  }

  createListData = (data) => {
    for (let [key, value] of Object.entries(data)) {
      if (value && typeof(value) == "object") {
        console.log(key, value);
        this.createButton(key);
        this.createListData(value);
      } else {
        this.createHidden(key);
        console.log(key);
      }
    }
  }

  render() {
    return <div>{this.createListData(this.state.data)}</div>
  }
}

export default DropdownList;

Приложение. js

import React from "react";
import DropdownList from "./DropdownList/DropdownList";
import data from "./menuItems.json";

function App() {
  return <DropdownList data={data} />;
}

export default App;

1 Ответ

1 голос
/ 16 января 2020

Это будет работать 

renderObject = obj => {
    return obj === 'object' ? Object.values(obj).map(val =>
      typeof val === 'object' ? (
        this.renderObject(val)
      ) : (
        <li>{val ? val : 'Any message'}</li>
      ),
    ) : <li>Any message</li>
  };
  render() {
    return <div>{this.renderObject(this.state.data)}</div>;
  }
...