javascript - 将 props 传递给 React 组件

Question

我刚刚开始学习 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 引用是否必须存在，如果不是，为什么有时会放置在那里？

Answer 1

因为，你定义了name全局变量并通过相同的键在 props 中传递名称值 name .

所以在这种情况下:<h1> {name}</h1> ，它采用全局定义的名称值，如果是 <h1>{props.name}</h1>它将采用 props 中传递的值而不是全局值。

现在，如果您想查看差异，则使用其他键在 props 中传递名称值，例如:

<Name nameValue={name} />

并使用 <h1> {props.name} </h1> 渲染它, 你不会看到任何东西因为 name props 中不存在 key 目的。

但是如果你使用 {props.nameValue}您会看到正确的值。