将布尔属性传递给组件不起作用

Question

我有组件Form.js：

....

function Form() {
    return (
        <View>
            <FormButton primary text="Login" />
            <FormButton primary={false} text="Register" />
        </View>
    );
}

export default Form;

第二个组件 - FormButton.js

....

function FormButton(props) {
    let {
        primary,
    } = props


    return (
        <Text>Primary: {primary}</Text>
    );
}

export default FormButton;

它不起作用。为什么？

当我像字符串一样传递 props Primary 时：

<FormButton primary="abc" text="Login" />

它有效，但是当我尝试像布尔值一样发送它时：

<FormButton primary text="Login" />

或

<FormButton primary={true} text="Login" />

或

<FormButton primary={false} text="Login" />

Answer 1

因为如果您将 props

primary

作为布尔值传递，则需要将其转换为字符串。简单使用

toString()

:

function FormButton(props) {
    let {
        primary,
    } = props


    return (
        <Text>Primary: {primary.toString()}</Text>
    );
}

export default FormButton;