Question

我正在尝试使用React JSX在Gatsby中创建条件渲染。我为该函数提供了一些参数，如下所示：

 <Label Content="{x:Static loc:Localization.Name}"
               ContentStringFormat=" _{0}"
               Target="{Binding ElementName=TextBoxName}" />

如您所见，该函数的几个参数是href，text和btnType。

在实现Button组件的页面上，如下所示：

const Button = (href, text, btnType, ...props) => {
    if (href.contains("http")) {
        return (
            <a href={href} {...props}>
                <button className={btnType}>
                    <span>{text}</span>
                </button>
            </a>
        )
    } else {
        return (
            <Link to={href} {...props}>
                <button className={btnType}>
                    <span>{text}</span>
                </button>
            </Link>
        )
    }
}

但是它提供了<Button btnType="btn-cta" text="External Link" href="https://google.com"> </Button> <Button btnType="btn-nav" text="Internal Link" href="/"> </Button>错误。

该如何解决？我对JavaScript和React还是很陌生，因此请仔细回答所有问题，以便我能完全理解我的代码出了什么问题。

Answer 1

href是组件的道具。不是参数。您需要使用

const Button = ({ href, text, btnType, ...props }) => {...

表示您想destructure使用函数的第一个参数，并从props对象获取href，text，btnType，然后使用将其余的道具放到...props中。

根据您当前的代码，href参数包含 all 您组件的所有道具，而不仅仅是href道具。在您的Button函数中添加一个断点，您会看到href是一个对象。

此外，正如@George在其comment中提到的那样，您应该使用includes，因为contains已过时，并且在现代浏览器中String的原型中可能不存在。 / p>

TypeError：xxx.contains不是React中的函数

1 个答案: