React组件中使用JSON数据文件的方法详解

import jsonData from './data.json';

function MyComponent() {
  return (
    <div>
      <h1>{jsonData.title}</h1>
      <p>{jsonData.content}</p>
    </div>
  );
}

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function MyComponent() {
  const [jsonData, setJsonData] = useState({});

  useEffect(() => {
    axios.get('/api/data').then((response) => {
      setJsonData(response.data);
    });
  }, []);

  return (
    <div>
      <h1>{jsonData.title}</h1>
      <p>{jsonData.content}</p>
    </div>
  );
}

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [jsonData, setJsonData] = useState({});

  useEffect(() => {
    fetch('./data.json')
      .then(response => response.json())
      .then(data => setJsonData(data));
  }, []);

  return (
    <div>
      <h1>{jsonData.title}</h1>
      <p>{jsonData.content}</p>
    </div>
  );
}

/* 父组件 */
function ParentComponent() {
  const jsonData = { title: 'Hello', content: 'World' };

  return <ChildComponent jsonData={jsonData} />;
}

/* 子组件 */
function ChildComponent(props) {
  return (
    <div>
      <h1>{props.jsonData.title}</h1>
      <p>{props.jsonData.content}</p>
    </div>
  );
}

import jsonData from './data.js';

function MyComponent() {
  return (
    <div>
      <h1>{jsonData.title}</h1>
      <p>{jsonData.content}</p>
    </div>
  );
}

const jsonData = {
  title: 'Hello',
  content: 'World'
};

export default jsonData;

import React, { useState } from 'react';

function MyComponent() {
  const [jsonData, setJsonData] = useState({ title: '', content: '' });

  function handleJsonData() {
    // 处理JSON数据
  }

  return (
    <div>
      <h1>{jsonData.title}</h1>
      <p>{jsonData.content}</p>
    </div>
  );
}