时间戳

首页 > 解决方案 > React - JSON 文件不会呈现

javascript - React - JSON 文件不会呈现

问题描述

我正在构建一排反应图标。选择图标以显示来自静态 .JSON 文件的内容。我正在尝试结合以下事件：

  1. 单击时更改颜色

  2. 单击时在静态 .JSON 内容之间更改/切换。

我尝试根据这篇文章将 2 个内联操作结合起来。

但是，只有颜色会发生变化，.JSON 数据不会发生变化。提前感谢您，任何帮助或指导将不胜感激。

下面是我的代码：

import React, { useState } from "react";
import "../Styles/arrow.css";
import { BsFillPeopleFill } from "react-icons/bs";
import { GiLinkedRings } from "react-icons/gi";


import { GoArrowRight } from "react-icons/go";

function Icon(props) {
  const handleClick = (messageKey) => () => props.setSelectedIcon(messageKey);
  const [bg, changeBGColor] = React.useState(1);

  return (
    <div className="icon-arrow">
      <div className="arrow">
        <div className="arrow-line" />
        <div className="arrow-icon">
          <GoArrowRight />
        </div>
      </div>
      <div className="icons">
        <GiLinkedRings
          className="rings"
          onClick={() => {
            handleClick("rings");
            changeBGColor(1);
          }}
          style={{
            backgroundColor: bg === 1 ? "#e3e1dc" : "#ae7a67",
          }}
        />

        <BsFillPeopleFill
          className="family"
          onClick={() => {
            handleClick("family");
            changeBGColor(2);
          }}
          style={{
            backgroundColor: bg === 2 ? "#e3e1dc" : "#ae7a67",
          }}
        />
      </div>
    </div>
  );
}

export default Icon;

我的 .JSON 数据：iconmessage.json

{
"rings": {
  "image": "rings.jpg",
    "title" : "Rings",
    "message":"Lorem Ipsum"
},
"family": {
  "image": "family.jpg",
    "title" : "Family is essential",
    "message":"Lorem Ipsum"
}

}

从 IconMessage.JSX 中提取的图标/.JSON

import React from "react";
import "../Styles/iconmessage.css";
import messages from "../Static/iconmessage.json";


function IconMessage(props) {

const message = messages[props.selectedIcon]

return (
    <div className="icon-message">
        <div className="title-message">
            <div className="title">{message.title}</div>
            <div className="message">{message.message}</div>

        </div>

        <div className="image">
            <img src={`/images/${message.image}`} alt="" srcset="" />
        </div>

    </div>
   )
}
export default IconMessage

标签： javascriptreactjsreact-hooksonclickuse-state

解决方案

从 onClick 的角度来看，你做了什么是正确的。我会说问题是你传递的价值。您确定当您将“环”传递给 selectedIcon 时，它应该按照您的意愿呈现 JSON 吗？

我认为问题在于您访问的是messages.title，messages.message，而不是messages.image.title，messages.image.message。

推荐阅读