将变量传递给另一个组件并在ReactJS中显示它

我需要在菜单组件（h6）中显示用户变量，但用户变量在另一个组件中

用户变量为const user=this.props.auth 我想在h6的排版上展示它

class Dashboard extends Component {
    onLogoutClick = e => {
        e.preventDefault()
        this.props.logoutUser()
   }  

render() {
    const {user} = this.props.auth
    return(
        <div>
            <Menu User={user}></Menu>             
        </div>
        )
    }
}

export default function Menu(props) {
const classes = useStyles()
const theme = useTheme()

const user = this.props.User
return (
    <div className={classes.root}>            
        <Typography variant='h6' noWrap>
            Welcome, {user}
        </Typography>
    </div>
    )
}

类仪表板扩展组件{
onLogoutClick=e=>{
e、 预防默认值（）
this.props.logoutUser（）
}  
render（）{
const{user}=this.props.auth
返回(
)
}
}
导出默认功能菜单（道具）{
常量类=useStyles（）
const theme=useTheme（）
const user=this.props.user
返回(
欢迎，{user}
)
}

欢迎，{user}

---

您必须关闭上面显示的卷曲括号，它应该可以正常工作

您可以使用

params

。这是一个建议

<Typography variant='h6' noWrap>Welcome, {user}</Typography>