javascript - ReactJS - child 如何访问它是 parent 的 Prop ？

Question

child 如何访问其 parent 的 Prop ？例如，

父组件 - footer.jsx:

import React from 'react';
import $ from 'jquery';

import NavItem from './nav-item';

class Footer extends React.Component
{
    constructor(props) {
        super(props);
        this.state = {
            publicUrl: null,
            currentUrl: null,
            navitems: [],
        };
    }

    // Then fetch the data using $.getJSON():
    componentDidMount() {
        this.serverRequest = $.getJSON(this.props.source, function (result) {
            this.setState({
                currentUrl: window.location.href,
                publicUrl: result.publicUrl,
                navitems: result.nav
            });
        }.bind(this));
    }

    componentWillUnmount() {
        this.serverRequest.abort();
    }

    render() {
        var loop = this.state.navitems.map(function(item, index){
            return <NavItem key={index} item={item}></NavItem>;
        });

        return (
            <div>
                <div className="nav">
                    <ul>{ loop }</ul>
                    <p>{this.state.publicUrl}</p>
                    <p>{this.state.currentUrl}</p>
                </div>
            </div>
        )
    }
}

export { Footer as default }

子组件 - nav-item.jsx:

从'react'导入React；

class NavItem extends React.Component
{
    constructor(props) {
        super(props);
    }

    render() {
        return <li><a href={this.props.publicUrl + '/' + this.props.item.url}>{this.props.item.title}</a></li>
    }
}

export { NavItem as default }

footer.jsx(父级)中的结果:

this.props.publicUrl // http://my-website.com

nav-item.jsx(子)中的结果:

this.props.publicUrl // undefined but it should be http://my-website.com

有什么想法吗？

示例数据:

{
    "publicUrl": "http:\/\/my-website.com",
    "nav": [{
        "navId": "3",
        "title": "Home
        "code": "home
        "href": null,
        "style": null,
        "sort": "3",
        "url": "home
        "parentId": null,
        "totalChildren": "0",
        "createdOn": null,
        "updatedOn": null
    }, {
        "navId": "4",
        "title": "About
        "code": "about
        "href": null,
        "style": null,
        "sort": "4",
        "url": "about
        "parentId": null,
        "totalChildren": "0",
        "createdOn": null,
        "updatedOn": null
    }, {
        "navId": "5",
        "title": "Contact",
        "code": "contact",
        "href": "#contact",
        "style": null,
        "sort": "5",
        "url": "contact",
        "parentId": null,
        "totalChildren": "0",
        "createdOn": null,
        "updatedOn": null
    }]
}

Answer 1

无法访问子组件中的父属性。您可以通过以下两种方式实现此目的:-

1. 通过像这样的 Prop 将值从父组件传递到子组件:- <NavItem key={index} publicUrl={this.state.publicUrl} item={item}></NavItem> .
2. 在状态中设置值并从子级发送操作以从状态中获取值。

此外，我注意到您在 componentDidMount 中设置状态值，因此要么在构造函数中为状态设置默认值，要么检查子组件中的未定义值