尝试使用动态道具渲染相同的反应组件（道具来自 json 文件）

Question

这是我的示例嵌套 json - 最低级别的 json 包含道具的条目（例如，articleClassName 是道具，特色图像是需要传递的道具值。）

{
  "TopTrends": {
    "Game1": {
      "articleClassName": "image featured",
      "imgSource": "../../../static/images/crsed (1)306.jpg",
      "articleHeader": "Cuisine Royale - Desktop Game",
      "articleDescr": "Most Popular games in US. 1+ millions players are playing now. Join your rivelaries.",
      "buttonClassName": "search-container",
      "articleUrl": "'google.com'",
      "articleLabel": "Play Now"
    },
    "Game2": {
      "articleClassName": "image featured",
      "imgSource": "../../../static/images/crsed (1)307.jpg",
      "articleHeader": "Cuisine Royale - Desktop Game",
      "articleDescr": "Most Popular games in US. 1+ millions players are playing now. Join your rivelaries.",
      "buttonClassName": "search-container",
      "articleUrl": "'google.com'",
      "articleLabel": "Play Now"
    }
  },
  "Travel": {
    "Travel1": {
      "articleClassName": "image featured",
      "imgSource": "../../../static/images/crsed (1)300.jpg",
      "articleHeader": "Cuisine Royale - Desktop Game",
      "articleDescr": "Most Popular games in US. 1+ millions players are playing now. Join your rivelaries.",
      "buttonClassName": "search-container",
      "articleUrl": "'google.com",
      "articleLabel": "Play Now"
    },
    "Travel2": {
      "articleClassName": "image featured",
      "imgSource": "../../../static/images/crsed (1)300.jpg",
      "articleHeader": "Cuisine Royale - Desktop Game",
      "articleDescr": "Most Popular games in US. 1+ millions players are playing now. Join your rivelaries.",
      "buttonClassName": "search-container",
      "articleUrl": "'google.com'",
      "articleLabel": "Play Now"
    }
  },

  "Household": {
    "Household1": {
      "articleClassName": "image featured",
      "imgSource": "../../../static/images/crsed (1)300.jpg",
      "articleHeader": "Cuisine Royale - Desktop Game",
      "articleDescr": "Most Popular games in US. 1+ millions players are playing now. Join your rivelaries.",
      "buttonClassName": "search-container",
      "articleUrl": "'google.com'",
      "articleLabel": "Play Now"
    },
    "Household2": {
      "articleClassName": "image featured",
      "imgSource": "../../../static/images/crsed (1)300.jpg",
      "articleHeader": "Cuisine Royale - Desktop Game",
      "articleDescr": "Most Popular games in US. 1+ millions players are playing now. Join your rivelaries.",
      "buttonClassName": "search-container",
      "articleUrl": "'google.com'",
      "articleLabel": "Play Now"
    }
  }
}

我有一个组件需要传递这些道具 -

import React from 'react';
import './style.css';

export default function Article(props) {
    return (    
            <article>
                        <a href="#" className={props.articleClassName}><img src={props.imgSource} alt="" /></a>
                        <header>
                            <h3><a href="#">{props.articleHeader}</a></h3>
                        </header>
                        <p>{props.articleDescr} </p>
                        <button className={props.buttonClassName} onclick={props.articleUrl} type="text"> {props.articleLabel} </button>
            </article>
    )
}

以及上述组件需要根据json文件返回的行数动态嵌入的主组件-

export default function Carousel() {              

    const [data , setData]=useState([]);
    const getData=()=>{
      fetch('./CarouselData.json'
      ,{
        headers : { 
          'Content-Type': 'application/json',
          'Accept': 'application/json'
         }
      }
      )
        .then(function(response){
          console.log('this is the response ' + response)
        //   console.log(response)
          return response.json();
        })
        .then(function(myJson) {
        //   console.log(myJson);
         setData(myJson)
        });
    }      

    useEffect(()=>{
      getData()
    },[]);
   

   return (
    <div style={{ top: 0 }}>
       <section className="carousel">
            <div className="reel">
                <article> 
                    <Article articleClassName="image featured" imgSource="../../../static/images/crsed (1)300.jpg"
                    articleHeader="Cuisine Royale - Desktop Game" 
                    articleDescr="Most Popular games in US. 1+ millions players are playing now. Join your rivelaries."
                    buttonClassName="search-container"
                    articleUrl="'https://google.com'"
                    articleLabel="Play Now"
                    />

                </div>
            </section>
        </div>
    )
}

如您所见，在上面的组件中，组件在将 props 传递给它后正在被渲染。我想循环遍历json数据（数据）并在渲染这个组件时动态传递props。

我尝试将 data 变量转换为数组 - 但对 javascript 和 react 不熟悉 - 总是出现语法错误。任何帮助，将不胜感激。如果发布的代码中有语法错误，请忽略 - 我已经删除并复制了很多东西粘贴到这里。

Answer 1

你需要先把你的数据转换成一个数组：

var articles = [];
for (const topHeader in data) {
    for (const title in data[topHeader]) {
      data[topHeader][title].header = topHeader;
      data[topHeader][title].title = title;
      articles.push(data[topHeader][title]);
    }
}

在 react 之后，您可以使用数组上的 .map 来创建所有组件

return <div>
    {
        articles.map(x => {
            return (
                <Article key={x.header + ' - ' + x.title}
                    articleClassName={x.articleClassName}
                    articleHeader={x.articleHeader} />)
        });
    }
</div>;

如果您想为 3 个顶部标题创建 3 个数组（如果它们是常量），等等...您可以尝试一下。

关键部分是确保反应，当它重新渲染该部分时，它防止它删除 DOM 的 html 内容并重新创建不停，而是将该对象元素链接到该 DOM 对象。您希望密钥能够唯一标识对象并且没有重复的密钥。