Question

我的目标是创建只读的Web应用程序，该应用程序根据登录的用户从JSON呈现用户详细信息。目前，应用仅显示DB-> JSON中的数据，不会更改它们。

我的问题简而言之：

1。如何从更多服务器导入JSON？

2。如何将JSON分成更多部分并在网页的不同位置使用这些部分？

3。如何在React应用程序中插入已解析的JSON？我的结构正确吗？我是否需要使用这种复杂的结构？

下面有更多详细信息：

我已经创建了API JSON，现在位于localhost上。我使用Java和Spring。 JSON现在看起来像这样：

{
"displayName": "John Doe",
"job": "Programmer",
"skills": [
    {
        "skillName": "Java",
        "levelValue": 4
    },
    {
        "skillName": "Spring",
        "levelValue": 1
    }
        ],
}

现在我想在React App中渲染JSON数据（这在我的团队中使用）。但是我想将JSON分为更多部分，并将其用于Web的不同部分。例如，我想在页面顶部渲染displayName，而在页面中间渲染skills。

我的应用-src文件夹现在具有以下结构：

组件-每个小部件都有其自己的组件。每个文件都有带有HTML代码的index.js文件。数据来自容器，格式为：{this.props.skill1}。

组件/技能小部件/index.js

class Card1 extends React.Component { 
  render() {
    return (
        <div className="col-sm-4">
             <h6>Skills</h6>
             {this.props.skillsList}
        </div>
           );
}

Card1.propTypes = {
    skillsList: PropTypes.any,
};

    
export default Card1;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

容器-合并组件。包含actions.js，constants.js，index.js，reducer.js和sagas.js文件。

全局-actions.js，constants.js
内部人员
媒体
模型

直接位于src文件夹中：index.js，network.js，reducers.js，request.js，routes.js，sagas.js（可能包括来自容器的数据）。

如何将位于不同服务器上的JSON片段导入React App？

0 个答案: