为什么我们在子组件中使用时要在大括号中编写 props

Question

在 Person(Child Component) 函数中将 prop 作为参数传递时，为什么我们应该将 props 写在大括号中？

应用程序.js

import React from 'react';
import Person from './Person';

const App = () => {
  return (
  <div>
     <Person name={"John"} /> 
  </div>
);
}

export default App;

Person.js

import React from 'react';

const Person = ({name}) => {       //I am talking about this line
  return (
  <div>
     <h1/>My name is {name}.</h1>
  </div>
);
}

export default Person;

Answer 1

如果要传递的字符串 prop 是静态的（就像这里一样），则无需这样做。

<Person name="John" /> 

会工作得很好。

{}每当要传递的值不是静态的时，您就需要s - 例如，当它来自变量时：

<Person name={nameFromState} /> 

当将任何内容插入 JSX（在 props 之外）时，您还需要{}s，如您所见

<h1/>My name is {name}.</h1>

这条线

const Person = ({name}) => {

只是解构，相当于

const Person = (props) => {
  const { name } = props;

这相当于

const Person = (props) => {
  const name = props.name;

所有这些可能性都很好，但有些人更喜欢在参数列表中解构以使事情更简洁。