React组件使用逻辑运算符条件渲染时无法接收传入props问题求助

核心诱因 #

该问题绝大多数情况由两个原因导致：

1. 条件判断逻辑不匹配：page变量的实际值和预期不符（比如类型为字符串"1"而非数字1），导致你以为渲染了传了display prop的分支，实际渲染的是后面未传该prop的分支
2. React组件复用逻辑：多个条件分支渲染的都是同类型的SelectServices组件，且未设置唯一key属性，React的Diff算法会将它们识别为同一个组件实例，只会复用首次渲染的结果，不会更新后续传入的props

排查步骤 #

• 先打印验证page的实际值与类型：在return语句前加一行console.log('page值：', page, '类型：', typeof page)，确认你预期要触发page===1分支时，page确实是数字1，没有出现类型不匹配、值意外变更的情况
• 临时注释掉page===2到page===5的四个分支，仅保留page===1的条件渲染分支，查看此时SelectServices是否能正常拿到display prop，如果可以则说明是后面的分支意外触发导致
• 检查SelectServices组件内部逻辑，确认是否存在接收prop后直接覆盖为undefined、或者设置了错误的默认值的情况

解决方法 #

方法1：给每个分支组件加唯一key #

让React识别为不同的组件实例，避免复用导致的prop不更新问题，代码修改如下：

return (
  <>
    {/* progress bar */}
    <ProgressBar percent={percent} />
    {/* 该组件可以正常接收props */}
    {<SelectServices display="any value here"/>}  
    {/* 预约UI渲染分支 */}
    {page === 1 && <SelectServices key="page1" display="any value here goes undefined"/>}
    {page === 2 && <SelectServices key="page2" />}
    {page === 3 && <SelectServices key="page3" />}
    {page === 4 && <SelectServices key="page4" />}
    {page === 5 && <SelectServices key="page5" />}
  </>
);

方法2：合并分支逻辑，避免多实例渲染 #

直接把条件判断放到prop传值里，只渲染一个SelectServices组件，从根源避免复用问题：

return (
  <>
    {/* progress bar */}
    <ProgressBar percent={percent} />
    <SelectServices display={page === 1 ? "any value here goes undefined" : undefined}/>
  </>
);

内容的提问来源于stack exchange，提问作者J.J.Robinson