Question

React.js 无法读取未定义的 V18 属性

2022-08-18

36

javascript reactjs

我正在制作一个简单的应用程序，在这里我制作一个按钮并向它传递一些道具

<HeaderContainer buttonToLink={'/signin'} buttonToText ={'Sign in'}>
//some code goes here
</HeaderContainer>

然后在另一个文件中处理它

export  function HeaderContainer({children , ...restpros}) {
console.log(restpros.buttonToLink,restpros.buttonToText)
return (
    <Header>
        <Header.Frame>
            <Header.Logo to={'/'} src = {Logo} alt = {'NetFlix'} />
            <Header.ButtonLink to ={restpros.buttonToLink} > <p>{restpros.buttonToText}</p></Header.ButtonLink>
        </Header.Frame>
        {children}
    </Header>
)}

我收到了错误

Can't read property of undefined

我不知道为什么我得到未定义，因为我将我的道具传递给它

注意： Header.ButtonLink 是一个反应路由器链接，我使用样式组件进行样式设置

Answer 1

我认为这可能是由于 HeaderContainer 组件中参数的格式所致。如果您查看此处“组合与继承”部分中的 ReactJS 文档： https://reactjs.org/docs/composition-vs-inheritance.html ，其中提到了如何通过 props 对象访问子项，如下所示：

export  function HeaderContainer(props) {
    console.log(props.buttonToLink, props.buttonToText);
    return (
        <Header>
            <Header.Frame>
                <Header.Logo to={'/'} src={Logo} alt={'NetFlix'} />
                <Header.ButtonLink to={props.buttonToLink} > 
                    <p>{props.buttonToText}</p>
                </Header.ButtonLink>
            </Header.Frame>
            {props.children}
        </Header>
    )}

现在您应该能够像以前一样使用您的组件：

<HeaderContainer buttonToLink={'/signin'} buttonToText ={'Sign in'}>
    <View>
        <Text>I'm a child component</Text>
    </View>
</HeaderContainer>

请让我知道这是否适合您，如果不行，我将在我的计算机上构建一个工作示例并与您分享。

祝你好运 :)