reactjs - React - 传递没有值的 prop

Question

我将 NativeBase 与 React Native 一起使用。

以这种方式创建的 NativeBase 按钮​​:

    <Button warning>
        <Text>Hello</Text>
    </Button>

您可以使用不同的类型来代替警告，例如信息或成功。

现在，我想基于 Prop 创建这些按钮并尝试执行以下操作:

<Button {this.props.type}>
    <Text>Hello</Text>
</Button>

但是我找不到方法来做到这一点，因为这个 Prop 没有值。

是否可以传递没有值的 props？

Answer 1

可以无值传递的组件属性基本上是 boolean 属性，并解析为 true。

这两个是相等的:

<Button primary />
<Button primary={true} />

考虑到上述情况，您可以使用spread attribute语法:

<Button {...{ [this.props.type]: true }}>
    <Text>Hello</Text>
</Button>

编辑(详细说明):

假设您的 this.props.type 为“成功”，Button 元素将解析为此(因为使用了动态属性名称):

<Button {...{ success: true }}>

现在，当您析构对象(这三个点)时，您将获得其所有属性和相应的值作为元素的 props:

<Button success={true} >

正如我已经提到的，请查看 this explanation .