如何正确访问组件内部的属性
如何正确访问组件内部的属性
提问于 2020-08-20 05:12:05
我正在尝试访问NavBar.js中的user对象。下面是代码，它是工作的，但种类感觉很脏，因为我必须在NavBar.js组件中执行data.user.children[0].props.user来访问用户对象。如果可能的话，我想以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;正如您所看到的，我有一个包含NavBar.js组件的Layout.js，我确信我没有正确地添加它。
我不是一个react开发人员，所以我猜这个代码片段足以让人来指导我。如果需要，我可以添加更多代码。
回答 4
Stack Overflow用户
回答已采纳
发布于 2020-08-20 05:33:52
您可以将相同的道具发送到布局组件，而不是从子组件中获取道具。然后你可以通过解构道具直接接触到用户。
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;Stack Overflow用户
发布于 2020-08-20 05:30:16
这应该更正确(如果props数据的结构是正确的)
<NavBar user={props.user}></NavBar>和
const NavBar = (user) => {
console.log("inside NavBar")
console.log(user)Stack Overflow用户
发布于 2020-08-20 05:29:24
我不知道你的布局道具的结构，但你可能会这样做：
<NavBar user={props.user.children[0].props.user}></NavBar>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63495072
复制相关文章
相似问题
腾讯云开发者
