Question

我对prop有疑问。以下是我的代码，我不明白为什么当我使用{this.props.name}呈现段落时，它不会显示props的名称。这可能是一个愚蠢的问题，但我刚刚开始React冒险，所以我需要你的帮助。

class CardGenerator extends React.Component{
    render(){
        return (
            <div>
                <Name/>
            </div>
        )
    }
}

class Name extends React.Component{
    render(){
        return <p>{this.props.name}</p>
    }
}

ReactDOM.render( <CardGenerator name='David'/>, document.getElementById('app'))

Answer 1

因为您没有将道具传递给Name组件。您正在将道具名称传递给CardGenerator组件，this.props.name将提供该名称。要访问Name组件内部，您需要再次将值传递给Name组件。

使用此：

class CardGenerator extends React.Component{
    render(){
        return (
            <div>
                <Name name={this.props.name}/>
            </div>
        )
    }
}

class Name extends React.Component{
    render(){
        return <p>{this.props.name}</p>
    }
}

ReactDOM.render( <CardGenerator name='David'/>, document.getElementById('app'))

检查工作示例：

class CardGenerator extends React.Component{
    render(){
        return (
            <div>
                <Name name={this.props.name}/>
            </div>
        )
    }
}

class Name extends React.Component{
    render(){
        return <p>{this.props.name}</p>
    }
}

ReactDOM.render( <CardGenerator name='David'/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

Answer 2

您正在将name传递给CardGenerator组件，但CardGenerator组件未将name传递给Name组件。

无法从道具中获取数据

2 个答案: