将 props 传递到 React 组件
我刚刚开始学习 React，正在创建组件并将 props 传递给它们。
我是否必须在以下示例中的 JSX 元素中引用 props（我见过引用 props 和不引用 props 的示例，两种方法似乎都可以）：
const name = 'Jonny'
function Name (props) {
return (
<h1>Name: {props.name}</h1>
)
}
ReactDOM.render(
<Name name={name} />,
document.getElementById('app')
)
如果我以完全相同的方式运行代码，只删除此行中的 props 引用，它似乎也能正常工作：
h1>Name: {name}</h1>
我的问题是，此时的 props 引用是否必须在那里，如果不是，为什么有时会放在那里？
这是因为，您已经全局定义了
name
变量，并通过相同的键
name
传递了 props 中的名称值。
所以在这种情况下：
<h1> {name}</h1>
，它采用全局定义的名称值，而在
<h1>{props.name}</h1>
的情况下，它将采用在 props 中传递的值而不是全局值。
现在，如果您想查看差异，请使用其他键传递 props 中的名称值，例如：
<Name nameValue={name} />
并使用
<h1> {props.name} </h1>
渲染它，您将看不到任何内容，因为
name
键不存在
props
对象中。
但是如果您使用
{props.nameValue>
，您将看到正确的值。
由于全局变量与使用它的组件位于同一文件中，因此它既可以通过 props 工作，也可以不使用 props 工作。
简而言之，如果您将值作为 prop 传递给组件，则需要从 props 中访问该值
就您而言
<Name name={name} />
name
传递了一个 prop，因此像
props.name
那样访问它是正确的做法，因为可能发生的情况是
Name
组件也是从其他地方呈现的，并且那里的名称变量可能没有定义为全局变量。
<h1>Name: {name}</h1>
之所以有效，是因为您有一个
const name = 'Jonny'
。当需要另一个组件将
name
的值传递给下一个组件时，将使用
props.name
。例如以下代码：
...
render(){
return (<DisplayName name='Johnny' />)
}
从
DisplayName
组件，您需要通过
props.name
访问
name
，如下所示：
render(){
return() => (
<h1>{this.props.name}</h1>
)
}
或：
DisplayName = ({name}) => ( // destructing name from the props received
<h1>{name}</h1>
)