Question

我在react中有简单的功能组件

import React from 'react';    
import styled from 'styled-components';
import IconButton from '@material-ui/core/IconButton';
import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart';
import RemoveShoppingCartIcon from '@material-ui/icons/RemoveShoppingCart';

const Wrapper = styled.section`
  padding: 1em;
  margin: 0 auto;
  width: 400px;
`;

const IngredientRow = styled.div`
    display: flex;
    margin: 5px 0;
    width: 40%;
    margin: 0 auto;
    margin-bottom: 10px;
    justify-content: space-between;
    align-items: center;
`

const IngredientSelector = (props) => {

    const Ingredient = (ingredient) => {
        return (
            <IngredientRow key={ingredient.id}>
                <span>
                    <IconButton color="primary" aria-label="add to shopping cart">
                        <RemoveShoppingCartIcon />
                    </IconButton>
                </span>
                <h4>a</h4>
                <span>
                    <IconButton color="primary" aria-label="add to shopping cart">
                        <AddShoppingCartIcon />
                    </IconButton>
                </span>
            </IngredientRow>
        )
    }


    return (
        <Wrapper>
            <h2>Select the Burger Ingredients</h2>
            {
                props.ingredients.map(ingredient => {
                    <Ingredient ingredient={ingredient} />
                })
            }



        </Wrapper>
    )
}

export default IngredientSelector;

它无法正常工作，并在控制台中显示错误。不知道为什么不起作用。请帮忙。

Answer 1

尝试将配料功能移到IngredientSelector之外，然后将构成对象的对象添加到配料的道具中

const Ingredient = ({ingredient}) => {
    return (
        <IngredientRow key={ingredient.id}>
            <span>
                <IconButton color="primary" aria-label="add to shopping cart">
                    <RemoveShoppingCartIcon />
                </IconButton>
            </span>
            <h4>a</h4>
            <span>
                <IconButton color="primary" aria-label="add to shopping cart">
                    <AddShoppingCartIcon />
                </IconButton>
            </span>
        </IngredientRow>
    )
}



const IngredientSelector = (props) => {
    return (
        <Wrapper>
            <h2>Select the Burger Ingredients</h2>
            {props.ingredients.map(ingredient => {
                    <Ingredient ingredient={ingredient} />
                })
            }
        </Wrapper>
    )
}

Answer 2

在对象“ Ingredient”中，对于“ ingredient.indgredient.id”，应使用“ props.ingredient.id”访问IngredientId。因为在功能组件“成分”中。传递的变量是成分。另外，键应在map函数中传递，而不要在返回值中传递。因此，您现有的代码将如下所示。

import React from 'react';    
import styled from 'styled-components';
import IconButton from '@material-ui/core/IconButton';
import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart';
import RemoveShoppingCartIcon from '@material-ui/icons/RemoveShoppingCart';

const Wrapper = styled.section`
  padding: 1em;
  margin: 0 auto;
  width: 400px;
`;

const IngredientRow = styled.div`
    display: flex;
    margin: 5px 0;
    width: 40%;
    margin: 0 auto;
    margin-bottom: 10px;
    justify-content: space-between;
    align-items: center;
`

const IngredientSelector = (props) => {

    const Ingredient = (ingredient) => { {/* change it props. But, its your preference*/}
        return (
            <IngredientRow key={ingredient.ingredient.id}> {/* Because the function component receives variable name ingredient`enter code here` */}
                <span>
                    <IconButton color="primary" aria-label="add to shopping cart">
                        <RemoveShoppingCartIcon />
                    </IconButton>
                </span>
                <h4>a</h4>
                <span>
                    <IconButton color="primary" aria-label="add to shopping cart">
                        <AddShoppingCartIcon />
                    </IconButton>
                </span>
            </IngredientRow>
        )
    }


    return (
        <Wrapper>
            <h2>Select the Burger Ingredients</h2>
            {
                props.ingredients.map(ingredient => {
                    <Ingredient ingredient={ingredient} key={ingredient.id}/> {/* Code change here */}
                })
            }



        </Wrapper>
    )
}

export default IngredientSelector;

Answer 3

您好像忘记了将dom返回地图内。

您将ingredient传递给成分组件作为道具，而不是作为参数。功能组件将props作为参数。


import React from 'react';    
import styled from 'styled-components';
import IconButton from '@material-ui/core/IconButton';
import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart';
import RemoveShoppingCartIcon from '@material-ui/icons/RemoveShoppingCart';

const Wrapper = styled.section`
  padding: 1em;
  margin: 0 auto;
  width: 400px;
`;

const IngredientRow = styled.div`
    display: flex;
    margin: 5px 0;
    width: 40%;
    margin: 0 auto;
    margin-bottom: 10px;
    justify-content: space-between;
    align-items: center;
`

const IngredientSelector = (props) => {

    const Ingredient = ({ingredient}) => { // recieves props
        return (
            <IngredientRow key={ingredient.id}>
                <span>
                    <IconButton color="primary" aria-label="add to shopping cart">
                        <RemoveShoppingCartIcon />
                    </IconButton>
                </span>
                <h4>a</h4>
                <span>
                    <IconButton color="primary" aria-label="add to shopping cart">
                        <AddShoppingCartIcon />
                    </IconButton>
                </span>
            </IngredientRow>
        )
    }


    return (
        <Wrapper>
            <h2>Select the Burger Ingredients</h2>
            {
                props.ingredients.map(ingredient => {
                    return <Ingredient ingredient={ingredient} /> // return the dom
                })
            }



        </Wrapper>
    )
}

export default IngredientSelector;

功能组件内部的自定义HTML

3 个答案: