使用外部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

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