如何遍历 JSON 数据并在 React 中动态创建和填充组件？

Question

我是 React 和 JSX 的新手，我创建了一个组件，它显示一个标题和图像，它们将作为一个链接。我现在想通过遍历 JSON 数据来设置标题和图像（目前我的 JSON 可以通过本地定义的变量访问）。

我想知道如何使用适当的数据动态创建和填充组件。我的代码目前如下所示：

<script>
        var RecipeList = React.createClass({
                const items = [
                    {
                        id: 2234567,
                        title: "Fried Chicken",
                        image-url: "https://images.media-allrecipes.com/userphotos/560x315/4577069.jpg",
                        ingredient: ["Chicken", "Flour", "Eggs", "Salt", "Pepper"]
                    },
                    {
                        id: 2234567,
                        title: "Grilled Chicken",
                        image-url: "https://images.media-allrecipes.com/userphotos/560x315/4577069.jpg",
                        ingredient: ["Chicken", "Olive oil", "Salt", "Pepper"]
                    }
                ]
                getDefaultProps: function() {
                  return {items: []}  
                },
                render: function() {
                    var listItems = this.props.items.map(function(item) {
                       return(
                            <div className="container-fluid">
                                <div className="row">
                                    <div className="recipeContainer col-sm-12 col-md-6 col-lg-4">
                                        <h3 className="recipeTitle">{this.props.title}</h3>
                                        <div className="recipeImage">
                                            <img src="{this.props.image}" />
                                        </div>
                                        <div className="recipeBtn">See recipe</div>
                                    </div>
                                </div>
                            </div>
                        );
                    });

                    return (
                        {listItems}
                    );
                 }
            });

ReactDOM.render(
                <div>
                    <IngredientList></IngredientList>
                    <RecipeList items={items}></RecipeList>
                    <RecipeSection></RecipeSection>
                </div>
                , document.getElementById("module"));
        </script>

Answer 1

这可以通过将 JSON 数据传递到 <RecipeList /> 的 items 属性中来实现，以便该数据用于通过该数据动态呈现组件。

此外，还有一些其他内容需要更新以使其正常工作：

1. 您需要修复输入 JSON 的格式，以便项目键用引号括起来，或者没有连字符。

2. 确保在呈现列表项时访问来自 item 中的 item 的数据，而不是访问来自 this 的项目数据

3. 在render() 方法的return 行中用“根元素”包装您正在呈现的列表项。一个简单的解决方案是通常用 <div> 包装返回结果，但是对于更新版本的 React，您可以使用 <React.Fragment>（这允许您在 render() 结果中返回多个元素，而无需添加额外的“div element" 成为生成的 DOM)。

这是一个有效的 sn-p：

<div id="module"></div>
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
<script type="text/babel">

  /*
  Use class to define component using React16
  */
  class RecipeList extends React.Component {
    
    render() {
    
      var listItems = this.props.items.map(function(item) {
        return(
          <div className="container-fluid">
            <div className="row">
              <div className="recipeContainer col-sm-12 col-md-6 col-lg-4">
                <h3 className="recipeTitle">{item.title}</h3> { /* <-- Corrected this to use item.title */ }
                <div className="recipeImage">
                  <img src={item.image} /> { /* <-- Corrected this to use item.image */ }
                </div>
              <div className="recipeBtn">See recipe</div>
            </div>
          </div>
        </div>
      );
    });
    
    /*
    When rendering multiple DOM elements as a list, you
    must wrap these with React.Fragment, or something else
    like a div
    */
    return (<React.Fragment>{listItems}</React.Fragment>);
    }
  };

  /*
  Declare items data array which will passed to the items
  prop of the <RecipeList> component
  */
  const items = [{
      'id': 2234567,
      'title': "Fried Chicken",
      'image': "https://images.media-allrecipes.com/userphotos/560x315/4577069.jpg",
      'ingredient': ['Chicken', 'Olive oil', 'Salt', 'Pepper']
  },
  {
      'id': 2234567,
      'title': "Grilled Chicken",
      'image': "https://images.media-allrecipes.com/userphotos/560x315/4577069.jpg",
      'ingredient': ['Chicken', 'Olive oil', 'Salt', 'Pepper']
  }];

  ReactDOM.render(
      <div>
        { /* Pass the items data array to the items prop */ }
        <RecipeList items={items}></RecipeList>
      </div>, 
  document.getElementById("module"));
</script>

希望有帮助！