Question

我一直在尝试传递一个道具（我有一个NavigationItem，并且那里有一个“键”适当性），并将该键用作参数在cointainer中的开关盒内，但是它只是给我一个“未定义” “ 反馈。这是组件代码：

<div className={classes.espacamento}  id="playstation">
                        <NavigationItem key={"playstation"} link="/produtos">
                            Playstation
                    </NavigationItem>
                    </div>

                    <div className={classes.espacamento}  id="xbox">
                        <NavigationItem key={"xbox"} link="/produtos">
                            Xbox
                    </NavigationItem>
                    </div>

我将其导出为“ navigationItens”，但那样行不通

import NavigationItens from '../../components/Navigation/Navbar/NavigationItens';

class Produtos extends Component {
    loadProdutosHandler() {
        if (!this.props.produtos) {
        switch(this.props.navigationItens.key) {
            case 'PS4':
                developmentServer.get('jogos')
                    .then(response => {
                        this.props.updateProdutosHandler(response.data.data);
                    });

                console.log("xbox")
                break;

            case 'playstation':
                developmentServer.get('jogos?plataforma=PS4')
                    .then(response => {
                        this.props.updateProdutosHandler(response.data.data);
                    });
                break;

            default:
             developmentServer.get('jogos?plataforma=PS4')
            .then(response => {
                this.props.updateProdutosHandler(response.data.data);
            });
                }
            }
    }

有人可以帮我吗？我是个初学者，现在非常困惑，哈哈

Answer 1

key在react中有特殊含义，因此当您尝试将其作为道具传递时，您的组件将看不到它（请参阅：https://reactjs.org/docs/lists-and-keys.html）-从文档-

如果您在组件中需要相同的值，则将其作为具有不同名称的道具明确传递

传递组件道具并在Swith箱子中使用

1 个答案: