React/React Web Component/是否可以获取数据？

Question

我在我的 html 网站中引入了一个 React 组件，并一直试图从 data.js 文件或 data.json 文件中获取数据，但没有结果。

我已经试过了：

import {data} from './data'

当它是一个 data.js 文件时，

import data from './data.json'

当它是一个 json 文件时。我也试过

data = require("./data.js")

。每次它生成一个 ReferenceError: require is not defined.

我希望为每个数据值生成的帖子提供数据。也许在一个简单的 React Web Component 中并且不创建一个完整的 React App 是不可能的。我在网上找到的关于 React Web Components 及其方法的阅读不多。

成分：

const names = [    
{
  name: 'name'
},
'Ada Lovelace', 
'Grace Hopper', 
'Margaret Hamilton'];

class TitleAddition extends React.Component {
    constructor(props) {
        super(props);
        this.state =  {
            data : '',
            name : '',
        }
}

render() {
    return(
        <>
        {
            names.forEach((item) => { console.log(item)})
        }
            { `${this.props.name}` }
            {some HTML}
                
        </>
     )
  }
}

我希望将名称数组放入一个单独的文件中 - 但没有任何结果。

Answer 1

问题是在标准 HTML 页面上调用脚本时 React 无法访问文件系统。当您使用

create-react-app

部署 React 应用程序时，它会在 Node.js 服务器上运行，并且该应用程序可以访问其自己的服务器根目录。如果你想把它作为一个网络组件来做，你需要创建某种后端 API 来通过

fetch()

函数获取你的数据。

现在，如果这是您的站点要显示的唯一动态数据，那么我会说走那条路。如果您计划让其他页面包含动态数据，那么我强烈建议将您的站点部署为完整的 React 应用程序。实际上，我建议您使用 Next.JS，它是 React 之上的一层。 NextJS 更全面，开箱即用。另一个巨大的好处是，您可以通过 next-cli 部署您的应用程序，或通过 Github 自动提交给 Next.JS 的制造商Vercel

。

除了所有标准的 React 库之外，Next.JS 还通过页面目录为您处理路由，因此您网站上的 URL，如

https://example.com/blog

会自动路由到

/pages/blog/index.js

。您还可以像

https://example.com/blog/some-blog-slug

=>

/pages/blog/[slug].js

一样轻松地拥有动态路线。

最后，Next.JS 有一个内置的后端快速服务器 API，具有与页面目录相同的基于文件系统的路由。

Next.JS 还可以生成静态站点，并且可以在数据源发生变化时自动重建站点的一部分。我强烈建议您检查一下。