reactjs - React - props 未定义

Question

我有两个组件。

1. MypropDestructuring.jsx(主要组件)
2. MypropDestructuringMessage.jsx(用于 prop 解构)(我是 React 解构概念的新手)

我认为我在 (MypropDestructuringMessage.jsx) Prop 解构中做错了什么。

在控制台日志中我收到以下错误 -

Uncaught ReferenceError: props is not defined at MypropDestructuringMessage.render (index.js:33930)

代码:

MypropDestructuring.jsx

// Let's import react
import React from "react";

// Import custom component
import MypropDestructuringMessage from "./MypropDestructuringMessage.jsx";


// Let's create component [[ MypropDestructuring ]]
class MypropDestructuring extends React.Component{

    // Let's create custom method
    _myProfile() {

        const myProfileData = [
            {
                id : 1,
                name : "Neon",
                age : 25,
                location : "UK",
                skill : "UI Dev"
            }
        ];

        // return
        return myProfileData.map( (profileArrg) => {

                return( 
                    <MypropDestructuringMessage key={profileArrg.id} name={profileArrg.name} age={profileArrg.age} location={profileArrg.location} skill={profileArrg.skill} /> 
                );
            }
        );

    }

    render(){

        const showProfile = this._myProfile();
        return(
            <section>

                <p>&nbsp;</p>
                <h6> Prop Desturcturing </h6>
                <hr />

                <div>
                    {showProfile}
                </div>

            </section>
        );
    }
}


// Let's render ReactDOM
export default MypropDestructuring;

MypropDestructuringMessage.jsx

// Let's import react
    import React from "react";

    // Let's create component [[MypropDestructuringMessage]]
    class MypropDestructuringMessage extends React.Component{
        render(){


            // Props destructuring
            const {name, age, location, skill} = props;

            return(

                <section>

                    <div>
                        <ul className="list-group">
                            <li className="list-group-item"> {name} </li>   
                            <li className="list-group-item"> {age} </li>   
                            <li className="list-group-item"> {location} </li>   
                            <li className="list-group-item"> {skill} </li>    
                        </ul>
                    </div>

                </section>
            );
        }
    }

    // Let's pass data with [[ propTypes ]] - object
    MypropDestructuringMessage.propTypes = {
        name : React.PropTypes.string.isRequired,
        age : React.PropTypes.number.isRequired,
        location : React.PropTypes.string.isRequired,
        skill : React.PropTypes.string.isRequired
    }


    // Let's render ReactDOM
    export default MypropDestructuringMessage;

Answer 1

不仅使用props，还使用this.props:

const {name, age, location, skill} = this.props;

这是关于 Destructuring assignment 的文档