動態渲染數據並有條件地渲染組件：React JS

Question

我正在嘗試實現一個詳細信息頁面，在其中顯示與每個項目相對應的詳細信息。 每個項目都有自己的詳細信息，這些詳細信息將顯示在“顯示詳細信息”中，單擊“隱藏詳細信息”時應隱藏相應項目的詳細信息。 有兩個組件 Item 和 ItemDetailViewer 分別顯示各個項目及其詳細信息。 我無法為每個 Item 組件實現顯示/隱藏。

此外，單擊顯示每個項目的詳細信息，詳細信息應顯示在表格中。 此表的項目因項目不同而不同； 這應該動態填充。

有人可以在這里幫助我嗎？

代碼沙箱： https : //codesandbox.io/s/summer-surf-4h0g6

應用組件

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import ItemViewer from "./Item";

const item1 = ["i1d1", "i2d2", "i3d3"];
const item2 = ["i2d1", "i2d2", "i2d3"];
const item3 = ["i3d1", "i3d2", "i3d3"];

const item1Detail = [
  { age: 21, email: "wassasaasif@email.com" },
  { age: 19, email: "dsdddee@email.com" }
];
const item2Detail = [
  { id: 24, phone: "454654654644" },
  { id: 29, phone: "465654654643" }
];
const item3Detail = [
  { index: 25, address: "dsdsdsdsds" },
  { index: 39, address: "trytytytyy" }
];
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      item1: [],
      item2: [],
      item3: [],
      item1Detail: [],
      item2Detail: [],
      item3Detail: []
    };
  }

  componentDidMount() {
    this.setState({
      item1,
      item2,
      item3,
      item1Detail,
      item2Detail,
      item3Detail
    });
  }

  render() {
    let {
      item1,
      item2,
      item3,
      item1Detail,
      item2Detail,
      item3Detail
    } = this.state;
    return (
      <>
        <ItemViewer
          index="1"
          item="item1"
          itemData={item1}
          itemDetailData={item1Detail}
        />
        <ItemViewer
          index="2"
          item="item2"
          itemData={item2}
          itemDetailData={item2Detail}
        />
        <ItemViewer
          index="3"
          item="item3"
          itemData={item3}
          itemDetailData={item3Detail}
        />
      </>
    );
  }
}

項目查看器組件

import React, { useState } from "react";
import ItemDetailViewer from "./ItemDetailViewer";

const ItemViewer = props => {
  const [isitem1, setItem1] = useState(false);
  const [isitem2, setItem2] = useState(false);
  const [isitem3, setItem3] = useState(false);
  const [openDetails, setOpenDetails] = useState(false);
  function renderItems(list, itemType, itemDetailData) {
    if (list && list.length > 0) {
      return (
        <>
          <ul>
            {list.map(function(item) {
              return <li key={item}>{item}</li>;
            })}
          </ul>
          {!openDetails && (
            <button onClick={() => handleClick(itemType)}>View Details</button>
          )}
          {openDetails && (
            <button onClick={() => handleClick(itemType)}>Hide Details</button>
          )}
          {isitem1 && (
            <ItemDetailViewer showDetais={openDetails} data={itemDetailData} />
          )}
          {isitem2 && (
            <ItemDetailViewer showDetais={openDetails} data={itemDetailData} />
          )}
          {isitem3 && (
            <ItemDetailViewer showDetais={openDetails} data={itemDetailData} />
          )}
        </>
      );
    } else {
      return <p>No Items Found</p>;
    }
  }
  function handleClick(item) {
    if (item === "item1") {
      setItem1(true);
      setOpenDetails(!openDetails);
    }
    if (item === "item2") {
      setItem2(true);
      setOpenDetails(!openDetails);
    }
    if (item === "item3") {
      setItem3(true);
      setOpenDetails(!openDetails);
    }
  }
  return (
    <div>
      <span>
        {props.index}: {props.item}
      </span>
      <div>{renderItems(props.itemData, props.item, props.itemDetailData)}</div>
    </div>
  );
};

export default ItemViewer;

ItemDetail 組件

import React from "react";

const ItemDetailViewer = props => {
  return (
    <>
      {
        <table>
          <tbody>
            <tr>
              <th>Key corresponding to each item</th>
              <td>Value corresponding to each item</td>
            </tr>
          </tbody>
        </table>
      }
    </>
  );
};
export default ItemDetailViewer;

Answer 1

查看這個更新的沙箱https://codesandbox.io/s/sad-wildflower-ek8ed

Answer 2

import React from "react";

const ItemDetailViewer = props => {
  const { data } = props;
  return (
    <div className={"container"}>
      {data.map((detail, index) => (
        <table key={index}>
          {Object.keys(detail).map((key, index) => (
            <div className={"records"}>
              <span>{key}</span>
              <span>:{detail[key]}</span>
            </div>
          ))}
        </table>
      ))}
    </div>
  );
};
export default ItemDetailViewer;

樣式文件

.App {
  font-family: sans-serif;
  text-align: center;
}

.records {
  display: flex;
  width: 300px;
}

table {
  border-width: 1px;
  border-style: solid;
  margin-right: 1em;
}

.container {
  display: flex;
}

您想要的確切輸出的屏幕截圖

這應該為您提供與數組中的對象數量一樣多的表。

我已經修改了沙箱，檢查它是否是你想要的https://codesandbox.io/s/sad-wildflower-ek8ed