繁体   English   中英

动态渲染数据并有条件地渲染组件:React JS

[英]Dynamically render data and render components conditionally: React JS

我正在尝试实现一个详细信息页面,在其中显示与每个项目相对应的详细信息。 每个项目都有自己的详细信息,这些详细信息将显示在“显示详细信息”中,单击“隐藏详细信息”时应隐藏相应项目的详细信息。 有两个组件 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;

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM