使用外部 JSON 文件数据作为不同页面中登陆部分的道具的最佳方法是什么？

Question

我是 ReactJS 的新手，我需要这个令人困惑的问题的答案。

我有一个登陆页面，我想在我的主页和联系页面中使用。我想要的是将外部 JSON 信息作为 props 发送到这些页面以及每次创建新页面时。

我有一个外部 JSON 文件，我想将其作为 props 添加到我的登陆页面文件中 这样做的最佳实践是什么，我应该在状态中保存并将其作为道具发送，还是直接作为道具发送

JSON 文件：

{

"landing page" : {
    "home": {
        "id":1,
        "image": "../media/video/Ai Motion5.mp4",
        "title" : "MyAkbar for IT consultant & Services",
        "description":"Boost up Your Works With our Services. My Incrediable Team is Here to Save Your Time and Money.",
        "buttonOne": "Get A Demo"
    },
    "Contact" : {
        "id":2,
        "image": "../media/video/Ai Motion5.mp4",
        "title" : "Contact",
        "description":"sdadasdskdjaskljdas Team is Here to Save Your Time and Money.",
        "buttonOne": "Get A Demo"
    }
}

}

家庭文件：

import React, { Component } from 'react'
import LandingPage from "./landingPage/LandingPage"
import WaveSection from './waveSection/WaveSection'
import MyReview from "./reviewSection/MyReview"
import './styles/style.css'
import data from '../../json/data.json';

class Home extends Component{


    render(){
        return(
            <div id='home' className='home'>
                <LandingPage 
                    title = {data['landing page'].home.title} 
                    img = {data['landing page'].home.image}
                    description ={data['landing page'].home.description}
                    btn = {data['landing page'].home.buttonOne}
                />
                <WaveSection/>
                <MyReview/>
            </div>
        )
    }
}

export default Home

联系文件：

import React, { Component } from 'react'
import video from '../../media/video/Ai Motion.mp4';
class Contact extends Component{
    render(){
        return(
            <section className='contact-section landingPage-section'>
                <div className="container">
            <video  autoPlay muted loop="True" id='myVideo' src={video}></video>
                </div>
            </section>
        )
    }
}

export default Contact

Answer 1

我将选择第一个选项（不将其存储在状态中），因为该数据是静态的并且应用程序不会直接修改它。