React组件多return语句失效及条件渲染异常问题排查

一、始终渲染MadeGoal的原因及修复 #

看你Cond组件的代码，问题出在分支逻辑的错误处理上：

function Cond(props) {
 const isGoal = props.isGoal;
 if (isGoal) {
  return <MadeGoal />;
 }
  return <MadeGoal />; // 这里是核心问题
  return (
    <div>
     {isGoal}</div>
  )
}

不管isGoal是true还是false，最终都会返回<MadeGoal />：

• 当isGoal为true时，进入if分支返回<MadeGoal />，函数直接结束
• 当isGoal为false时，跳过if分支，直接执行下面的return <MadeGoal />

修复方法很简单，把if分支外的return改成返回<MissedGoal />，同时可以删掉最后那个永远不会执行的return：

function Cond(props) {
 const isGoal = props.isGoal;
 if (isGoal) {
  return <MadeGoal />;
 }
 return <MissedGoal />; // 替换为MissedGoal组件
}

也可以用更简洁的三元表达式写法：

function Cond(props) {
 return props.isGoal ? <MadeGoal /> : <MissedGoal />;
}

二、关于React组件中多个return的疑问 #

React函数组件本质就是普通JavaScript函数，完全可以写多个return语句，但函数一旦执行到某个return就会立即终止，后续的代码（包括其他return）都不会被执行。

比如你原代码里最后那个return (...)永远不会被触发，因为前面已经有return语句结束了函数。这不是React的限制，而是JavaScript函数的基本特性——return语句会直接终止函数执行并返回值，所以同一执行路径里后面的代码都不会运行。

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