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

Question

我是reactJS新手，我需要一个解决这个令人困惑的问题的答案。

我有一个登陆页，我想使用在我的家庭和联系网页。我想要的是向这些页面发送外部JSON信息作为支持，每次创建新页面时都是如此。

我有一个外部JSON文件，我想将它作为道具添加到我的登陆页面文件中

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

我将选择第一个选项(不将其存储在状态中)，因为这些数据是静态的，应用程序不会直接修改它。