为啥我的 IF 不返回组件 <Item_burger />？

Posted 2023-02-22

【中文标题】为啥我的 IF 不返回组件 <Item_burger />？

【英文标题】：Why my IF don’t return component <Item_burger />?为什么我的 IF 不返回组件 <Item_burger />？

【发布时间】：2019-12-12 07:54:50

【问题描述】：

我有汉堡的菜单）有不同的项目，结果我想从不同的标题打开不同的组件）

const MenuItems = props => 
    const  title, price, composition  = props;
    let myComponent = require(`../` + `img/` + `$title` + `.png`);
    const onClick=()=>
        if(title!=='burger')
            return (<Item_burger />)
            console.log(title)
        

    
        return (
            <div className="col-sm-6">
                <img className="card-img-top mb-5" src=myComponent />
                <div className="card shadow-sm">
                    <div className="card-body text-center">
                        <h3>
                            <strong>title</strong>
                        </h3>
                        <p className="card-text">
                            <strong>composition</strong>
                        </p>
                        <h4>price</h4>
                        <Link to=`burger/constructor/$title`> 
                        <button type="submit" className="btn btn-outline-light" onClick=onClick>Go to Lab of taste =></button>
                        </Link>
                    </div>
                </div>
            </div>
        )
    

【问题讨论】：

事件处理程序中的返回无处可返回。您正在寻找的预期行为是什么？ <Link> 内带有 onClick 的按钮也没有意义

你会想了解条件渲染：reactjs.org/docs/conditional-rendering.html

您可能希望<Item_burger /> 在与链接路径关联的路由中呈现。建议大家学习一些路由器教程和文档中的例子

也发布您的路线。

你的onClick 没有用，因为你已经用Link 包裹了你的button。一旦点击它就不会等待执行您的onClick 函数并直接重定向到burger/constructor/$title 路径。你应该有 Route 来处理这个路径。

【参考方案1】：

我很确定您的 onClick 确实返回了 <Item_burger /> 组件，但未使用此返回值。您应该使用react-router 在burger/constructor/$title 的路由下显示Item_burger 组件。参考https://reacttraining.com/react-router/web/example/basic。

顺便说一下，不要混合插值和连接，如下：

let myComponent = require(`../` + `img/` + `$title` + `.png`);

可以写成：

let myComponent = require(`../img/$title.png`);

此外，您不应在 <Link> 中使用 <button> - Link 是 a。不过，您可以设置 Link 的样式，使其看起来像一个按钮。

【参考方案2】：

谢谢大家）我不明白，为什么开始工作）我会做同样的事情）也许？这是因为我有一点练习）但我正在努力......