向组件传递布尔类型Props失效，求原因及解决办法

我拥有Form.js和FormButton.js两个组件，代码如下：

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;

目前传递布尔类型的primary Props无法正常工作，但传递字符串类型的primary（如<FormButton primary="abc" text="Login" />）却可以正常运行，请问这是为什么？

核心原因：JSX属性规则与真值判断差异 #

1. JSX属性的解析逻辑

   • 简写属性：<FormButton primary text="Login" /> 等价于 <FormButton primary={true} text="Login" />，传递的是布尔值true。
   • 表达式属性：<FormButton primary={false} text="Register" /> 传递的是布尔值false，语法本身完全正确。
   • 字符串属性：<FormButton primary="abc" text="Login" /> 传递的是字符串"abc"，在JavaScript中属于真值（非空字符串会被判定为true）。

2. 布尔false“不工作”的本质
   你觉得布尔类型不工作，大概率是因为组件内有基于primary的逻辑判断（比如样式切换、条件渲染）：

   • 当传递primary={false}时，false是假值，逻辑会走“非primary”分支；
   • 传递字符串"abc"时，字符串是真值，逻辑会走“primary”分支。
     两者行为不同，导致你误以为布尔类型失效，实际是真值判断的预期偏差。

   另外，如果组件没给primary设置默认值，不传递该属性时它的值是undefined，同样会被判定为假值，和传递false效果一致。

优化建议 #

如果希望primary默认值为false，可以给组件props设置默认值，让逻辑更清晰：

function FormButton(props) {
    let {
        primary = false, // 设置默认值为false
    } = props

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

这样：

• 不传递primary时，使用默认值false；
• 写primary或primary={true}时，值为true；
• 写primary={false}时，值为false。

内容的提问来源于stack exchange，提问作者Execss