如何使用我的 json 信息和 REACT 创建菜单

Question

我尝试做的是与这张图片有相同的显示：

所以在我的菜单中，植物类型 (Type of plant1) 显示在灰色条上方，当您单击向下的 V 形时，您可以看到所有与此类型相关的植物名称，并带有复选框左边，默认会有全部勾选。蓝色矩形表示已选择的植物数量。我该怎么做，哪个包可以帮助我进行 REACT？

这是我的 plants.json :

{
    "plants_type": [
        {
            "_id_type": "1",
            "name_type": "Type of plant1",
            "plants": [
                {
                    "name": "Plant1.1",
                    "_id": "2"
                },
                {
                    "name": "Plant1.2",
                    "_id": "3"
                }
            ]
        },
        {
            "_id_type": "4",
            "name_type": "Type of plant2",
            "plants": [
                {
                    "name": "Plant2.1",
                    "_id": "5"
                },
                {
                    "name": "Plant2.2",
                    "_id": "6"
                }
            ]
        }
    ]
}

Answer 1

您可以像下面这样自行创建下拉列表。我已将选择项目的逻辑添加到数据本身。

您可以保留一个名为 Category 的组件来保持父菜单项的单一状态。不管开不开。然后遍历植物作为复选框输入，使它们可选择。

我使用了一个简单的初始化函数来让所有项目都被初始选中。这应该会如您所愿。添加 selectionMenu 的控制台日志以查看所选属性在切换项目时如何变化。

将内联样式移动到 CSS 类以使代码更清晰。

const data = { plants_type: [ { _id_type: "1", name_type: "Type of plant1", plants: [ { name: "Plant1.1", _id: "2" }, { name: "Plant1.2", _id: "3" } ] }, { _id_type: "4", name_type: "Type of plant2", plants: [ { name: "Plant2.1", _id: "5" }, { name: "Plant2.2", _id: "6" } ] } ] };

const Category = ({ _id_type, name_type, plants, changeSelection }) => {
  const [toggleState, setToggleState] = React.useState(false);

  return (
    <div key={_id_type}>
      <div
        style={{
          cursor: "pointer",
          userSelect: "none",
          display: "flex",
          margin: "2px",
          backgroundColor: "lightgray"
        }}
        onClick={() => setToggleState((prev) => !prev)}
      >
        <div>{name_type}</div>
        <div
          style={{
            backgroundColor: "blue",
            color: "white",
            padding: "0px 10px",
            marginLeft: "auto"
          }}
        >
          {plants.filter(({ selected }) => selected).length}
        </div>
      </div>
      <div style={{ marginLeft: "10px" }}>
        {toggleState &&
          plants.map(({ name, _id, selected }) => (
            <div key={_id}>
              <input
                key={_id}
                type="checkbox"
                value={name}
                checked={selected}
                onChange={(e) => changeSelection(_id_type, _id, e.target.value)}
              />
              {name}
            </div>
          ))}
      </div>
    </div>
  );
};

const App = () => {
  const initializeSelectionMenu = (data) => {
    return data.map((item) => {
      return {
        ...item,
        plants: item.plants.map((plant) => ({ ...plant, selected: true }))
      };
    });
  };

  const [selectionMenu, setSelectionMenu] = React.useState(
    initializeSelectionMenu(data.plants_type)
  );
  
  console.log(selectionMenu);

  const changeSelection = (catId, itemId, value) => {
    setSelectionMenu((prevSelectionMenu) =>
      prevSelectionMenu.map((item) => {
        if (item._id_type === catId) {
          return {
            ...item,
            plants: item.plants.map((plant) => {
              if (plant._id === itemId) {
                return { ...plant, selected: !plant.selected };
              }
              return plant;
            })
          };
        }
        return item;
      })
    );
  };

  return (
    <div>
      {selectionMenu.map((item) => (
        <Category
          {...item}
          changeSelection={changeSelection}
          key={item._id_type}
        />
      ))}
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

如何使用我的 json 信息和 REACT 创建菜单

How can I create a menu with my json info with REACT

html

javascript

json

reactjs