javascript - 如何从 json 渲染对象

Question

我需要从给我的一些 json 中渲染一些图像。代码看起来像

class App extends React.Component {
  componentDidMount() {
    $.get(
    "url"
    data => {

    });

  }
  render() {
    return React.createElement("div", null, "hello");
  }}


ReactDOM.render(React.createElement(App, null), document.body);

“url”是我传入的json(但我不想公开)。它看起来类似于:

{
    "total_count": null,
    "_links": {
        "self": {
            "href": ""
        },
        "next": {
            "href": ""
        }
    },
    "_embedded": {
        "showorks": [{
            "id": "",
            "slug": "",
            "created_at": "",
            "updated_at": "",
            "title": "",
            "category": "",
            "medium": ",
            "date": "",
            "dimensions": {
                "in": {
                    "text": "",
                    "height": 70.9,
                    "width": 70.9,
                    "depth": null,
                    "diameter": null
                },
                "cm": {
                    "text": "180.1 × 180.1 cm",
                    "height": 180.1,
                    "width": 180.1,
                    "depth": null,
                    "diameter": null
                }
            },
            "published": true,
            "website": "",
            "signature": "",
            "series": null,
            "prov": "",
            "lit": "",
            "hist": "",
            "isst": "",
            "additional_information": "",
            "image_rights": "",
            "blurb": "",
            "unique": false,
            "maker": null,
            "icon": ,
            "inquire": false,
            "acquire": false,
            "share": true,
            "message": null,
            "sell":,
            "image_versions": ,
            "_links": {
                "thumbnail": {
                    "href": ""
                },
                "image": {
                    "href": "",
                    "templated": true
                },
                "partner": {
                    "href": ""
                },
                "self": {
                    "href": ""
                },
                "link": {
                    "href": ""
                },
                "genes": {
                    "href": ""
                },
                "rar": {
                    "href": ""
                },
                "cim": {
                    "href": ""
                },
                "coll": {
                    "href": ""
                }
            },
            "_embedded": {
                "editions": []
            }
        }, {
            "id": "",

我需要每个 id 的缩略图，但我不确定如何迭代 json 以在 React/javascript 中提取每个缩略图

Answer 1

首先，我完全推荐你使用 JSX 语法，以便更好地使用 React。为此，您将需要一些 Javascript 数组辅助函数和一些方法。

如下所示:

class App extends React.Component
{
  componentDidMount()
  {
    // We could imagine the incoming JSON data
    // const exampleJson =
    // {
    //  elements:
    //  [
    //    { href: 'example1', text: 'link value', style: { height: '10px' } },
    //  ],
    // };

    // This fetch API will help you to get JSON from URL like JQuery $.get
    const exampleJson = fetch('http://example.com/links.json')
      .then(function(response)
      {
        return response.json(); // get the values of JSON as string type
      })
      .then(function(myJson)
      {
        return JSON.stringify(myJson); // convert the JSON data to javascript object
      });

    this.setState(exampleJson); // it's like this.setState({ elements: [array values] });

    console.log(exampleJson); // to do debug of your JSON data
  }

  render()
  {
   // we getting the elements array from state object
   // with object spread operator
   const { elements } = this.state;

   // get values all of your json array
   // loop values to do React element
   // return all new values to use loopAndSaveElements variable
   const loopAndSaveElements = elements
     .map(({ text, ...otherProps}) => React.createElement('a', otherItems, text));

   // send return div of React as loopAndSaveElements as array children
   return React.createElement("div", null, loopAndSaveElements);
  }
}

顺便说一句，我没有运行示例片段。但我希望它能给你一些信息。

ES6+ 来源:

• const
• Array map
• spread syntax
• JSX syntax
• fetch API