如何正确访问组件内部的道具

如何解决如何正确访问组件内部的道具

我正在尝试访问user中的NavBar.js对象。下面的代码可以正常工作，但是由于我需要在data.user.children[0].props.user组件中执行NavBar.js才能访问用户对象，因此感觉有些脏。如果可能，我想以props.user的身份访问它。下面是我的代码。

//NavBar.js
import React,{ useState } from "react";
import { Menu } from "semantic-ui-react";

const NavBar = (data) => {
    console.log("inside NavBar")
    console.log(data.user.children[0].props.user) //<--this does not feel right. Can't it be accessed as props.user?

    return (
        <Menu>
            <Menu.Item
                name='home'
                content='Home'
                href="/"
            />

            <Menu.Item
                name='whoami'
                content='Who Am I?'
                href="/whoami"
            />

        </Menu>

    );
};

export default NavBar;

//Layout.js
import { Container,Grid } from "semantic-ui-react";
import NavBar from "./NavBar";
const Layout = (props) => {
    return (
        <Container>
            <Grid>
                <Grid.Row>
                    <Grid.Column>
                        <NavBar user={props}></NavBar> //<--I am sure I am doing something wrong here
                    </Grid.Column>
                </Grid.Row>
                <Grid.Row>
                    <Grid.Column>
                        {props.children}
                    </Grid.Column>
                </Grid.Row>
            </Grid>

        </Container>
    )
};

export default Layout;

//_app.js
import 'semantic-ui-css/semantic.min.css'
import Layout from '../components/Layout';

function MyApp({ Component,pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />;
    </Layout>
  )
};

export default MyApp;

如您所见，我有Layout.js，其中有NavBar.js个组件，我确定我添加的方式不正确。

我不是一名开发人员，所以我猜想此代码段足以指导我。如果需要，我可以添加更多代码。

解决方法

这应该更正确（如果道具数据的结构正确）

<NavBar user={props.user}></NavBar>

和

const NavBar = (user) => {
console.log("inside NavBar")
console.log(user)

,

您可以将相同的道具发送给Layout组件，而不是从子项中获取道具。然后，您可以通过破坏道具来直接联系用户。

function MyApp({ Component,pageProps }) {
  return (
     /** send same props */
    <Layout {...pageProps}>
      <Component {...pageProps} />;
    </Layout>
  )
};

export default MyApp;

//Layout.js
import { Container,Grid } from "semantic-ui-react";
import NavBar from "./NavBar";
/** destructure user */
const Layout = ({user}) => {
    return (
        <Container>
            <Grid>
                <Grid.Row>
                    <Grid.Column>
                        /** send user again */
                        <NavBar user={user}></NavBar> //<--I am sure I am doing something wrong here
                    </Grid.Column>
                </Grid.Row>
                <Grid.Row>
                    <Grid.Column>
                        {props.children}
                    </Grid.Column>
                </Grid.Row>
            </Grid>

        </Container>
    )
};

export default Layout;

//NavBar.js
import React,{ useState } from "react";
import { Menu } from "semantic-ui-react";

const NavBar = ({user}) => {
    /** Use the user prop directly */
    console.log("inside NavBar",user)
    return (
        <Menu>
            <Menu.Item
                name='home'
                content='Home'
                href="/"
            />

            <Menu.Item
                name='whoami'
                content='Who Am I?'
                href="/whoami"
            />

        </Menu>

    );
};

export default NavBar;

,

我不知道您的Layout道具的结构，但也许您会这样做：

<NavBar user={props.user.children[0].props.user}></NavBar>

,

我建议您分解道具。 NavBar组件似乎只需要用户属性，因此您可以在Layout中传递它。

const Layout = (props) => {
  let {
    user
  } = props.user.children[0].props;

  return(
    ...
    <NavBar user={user}></NavBar>
  )
}

然后在NavBar组件中直接访问用户。

const NavBar = (user) => {
  console.log(user)
}