类组件向函数组件传值遇编译错误，求排查解决

一、先拆解编译报错的原因 #

你碰到的no-unused-expressions错误，大概率是以下两种情况之一：

1. 类组件中JSX表达式未被正确返回
   你写的<UserMenu {...userInfo}/>是一个JSX表达式，如果它没有被放在类组件render()方法的返回结构里，而是单独写在render()外面或者某个非返回的代码块中，就会触发这个错误——因为JSX本质是表达式，必须被用来赋值或者作为返回值使用，不能孤立存在。

   正确的类组件写法应该把<UserMenu>整合到render的返回内容里：

   class YourClassComponent extends React.Component {
     // ...其他业务代码
     render() {
       const { userInfo } = this.state;
       // 将UserMenu作为组件树的一部分放在return中
       return (
         <div className="your-container">
           {/* 其他组件内容 */}
           <UserMenu {...userInfo} />
           {/* 其他组件内容 */}
         </div>
       );
     }
   }
   

2. UserMenu组件内部存在未被使用的孤立表达式
   报错指向UserMenu.js第18行，说明你在函数组件里写了一个既不是赋值操作也不是函数调用的表达式，比如不小心单独写了address;或者designation;这样的语句，却没有把它们嵌入JSX中（正确写法应该是{address}）。

二、正确访问userInfo的属性 #

现在你的UserMenu组件只声明接收id这个props，但userInfo里的address、designation等属性并没有被解构接收，直接使用肯定会出问题。你可以通过两种方式处理：

方式1：解构需要的所有属性

直接在函数参数里解构出你需要的属性，这样就能在组件内部直接使用：

// 解构id、address、designation，以及你需要的其他属性
function UserMenu({ id, address, designation }) {
  const dispatch = useDispatch();
  const [userMenu, setUserMenu] = useState(null);
  const userMenuClick = event => { setUserMenu(event.currentTarget); };
  const userMenuClose = () => { setUserMenu(null); };
  
  // 现在可以直接使用address、designation了
  return ( 
    <> 
      <Popover>
        {/* 示例：在Popover中展示属性 */}
        <div className="user-address">地址：{address}</div>
        <div className="user-designation">职位：{designation}</div>
        {/* 其他Popover内容 */}
      </Popover> 
    </> 
  );
}
export default UserMenu;

方式2：接收完整props对象

如果userInfo的属性很多，或者不确定未来会用到哪些，可以直接接收整个props对象，通过props.xxx访问：

function UserMenu(props) {
  const dispatch = useDispatch();
  const [userMenu, setUserMenu] = useState(null);
  const userMenuClick = event => { setUserMenu(event.currentTarget); };
  const userMenuClose = () => { setUserMenu(null); };
  
  // 通过props对象访问属性
  return ( 
    <> 
      <Popover>
        <div className="user-address">地址：{props.address}</div>
        <div className="user-designation">职位：{props.designation}</div>
        {/* 其他内容 */}
      </Popover> 
    </> 
  );
}
export default UserMenu;

最后检查清单 #

• 确认类组件中<UserMenu {...userInfo} />确实在render()的返回值范围内
• 确认UserMenu组件中所有用到的属性都通过解构或props对象正确接收
• 检查UserMenu.js第18行的代码，确保没有孤立的表达式（比如单独的变量名，没有用{}包裹在JSX里）

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