动态渲染数据和有条件地渲染组件：React JS

Question

我正在尝试实现一个详细信息页面，我在其中显示与每个项目对应的详细信息。每个项目都有自己的详细信息，这些详细信息将显示在 "Show Details" 上，单击 "Hide Details" 时应隐藏相应项目的详细信息。有两个组件 Item 和 ItemDetailViewer 分别显示各个项目及其详细信息。我无法为每个项目组件实施 Show/Hide。

同样，单击显示每个项目的详细信息后，详细信息应显示在 table 中。此 table 的项目因项目而异；这应该动态填充。

有人可以帮我吗？

代码沙箱：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}
        />
      </>
    );
  }
}

ItemViewer 组件

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;

styles.css

.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

动态渲染数据和有条件地渲染组件：React JS

Dynamically render data and render components conditionally: React JS

javascript

setstate

reactjs

react-hooks

应用组件

ItemViewer 组件

ItemDetail 组件