React文本输入框placeholder属性按需设置方法求教

在React中，要实现“当placeholder为空时不渲染该属性”的需求，利用React的属性渲染规则即可——React会自动忽略值为null、undefined或false的属性。下面是两种可行的最优方案：

方法一：短路求值（最简洁写法） #

直接在属性中使用逻辑与运算符，当placeholder为空字符串、null或undefined时，表达式返回假值，React不会渲染该属性：

<input type="text" placeholder={placeholder && placeholder} />

方法二：明确赋值为undefined #

如果需要更清晰的逻辑表达，用三元运算符将空值转为undefined：

<input type="text" placeholder={placeholder ? placeholder : undefined} />

为什么你之前的方法无效？ #

• 拼接字符串属性的方式不符合JSX语法规则，JSX不支持直接插入字符串形式的属性键值对，必须通过{}传递合法的JavaScript表达式。
• 直接写placeholder={placeholder}时，空字符串属于“非假值”范畴（React对字符串属性的处理逻辑是：只要值不是null/undefined/false，都会渲染，包括空字符串），所以会出现<input type="text" placeholder>的情况。

完整组件示例 #

function TextField({ placeholder, size, statusStylesInput }) {
  return (
    <div className={`text-field text-field-${size} ${statusStylesInput}`}>
      <input type="text" placeholder={placeholder && placeholder} />
    </div>
  );
}

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