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数据传递到items的{{1}}道具中来实现，以便使用该数据通过该数据动态呈现组件。

另外，还有一些其他事情需要更新才能使它起作用：

您将要修复输入JSON的格式，以使项目键用引号引起来，或者没有连字符。
确保呈现列表项时从<RecipeList />的{{1}}访问数据，而不是从item
在map()方法的this行中用“根元素”包裹要呈现的列表项。一个简单的解决方案是通常用return包装返回结果，但是在React的最新版本中，您可以使用render()（这允许您在<div>结果中返回多个元素，而不添加额外的“ div元素”作为最终的DOM）。

这是一个有效的代码段：

<React.Fragment>

希望有帮助！

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

1 个答案: