Question

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

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>
        )
    }

Answer 1

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

顺便说一下，请勿将插值和串联混合使用以下内容：

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

可以写为：

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

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

Answer 2

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

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

2 个答案: