为什么我的 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} alt="...."/>
                <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 来处理这个路径。

标签： reactjs react-router

【解决方案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】：

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

【讨论】：