如何访问通过扩展运算符接收的React Props？为何test为undefined？

问题1：扩展props后test为undefined的原因 #

最常见的问题是传递对象的方式错误——你把目标对象作为props的单个属性传递，而非直接将对象的属性展开为组件的props。

举个错误示例：
父组件代码：

const testObj = { test: 'hello world' };
<MyComponent data={testObj} /> // 把testObj放到了props的data属性中

子组件代码：

function MyComponent(props) {
  console.log(props); // 输出 { data: { test: 'hello world' } }，符合预期
  const expanded = { ...props };
  console.log(expanded.test); // undefined，因为expanded仅包含data属性，没有test
}

正确的传递方式是直接展开对象，将对象属性作为组件props：

const testObj = { test: 'hello world' };
<MyComponent {...testObj} /> // 展开testObj，把test作为props属性传递

子组件中：

function MyComponent(props) {
  console.log(props); // 输出 { test: 'hello world' }
  const expanded = { ...props };
  console.log(expanded.test); // 输出 'hello world'，正常获取
}

另外也可能是你传递的props本身就不包含test属性，只是打印时没注意到这种情况，此时无论是否扩展，test都会是undefined。

问题2：传递test={'testing'}并使用(...props)调用组件的预期结果 #

React中调用组件时的(...props)是展开运算符的正确用法，作用是把一个对象的所有属性作为单独props传递给组件。

示例：

// 定义包含test的props对象
const props = { test: 'testing' };
// 调用组件时展开该对象
<MyComponent {...props} />

这等价于直接写<MyComponent test="testing" />，子组件接收的props里会包含test: 'testing'，可直接通过props.test获取该值。

问题3：传递test对象能否获取其属性 #

完全可以。如果把一个对象作为test属性传递：

const userInfo = { name: 'Alice', age: 28 };
<MyComponent test={userInfo} />

子组件中可直接通过props.test拿到该对象，并访问其属性：

function MyComponent(props) {
  console.log(props.test.name); // 输出 'Alice'
  console.log(props.test.age); // 输出 28
}

如果需要将该对象的属性展开为独立变量，也可以在子组件中再次使用扩展运算符：

const { name, age } = { ...props.test };
console.log(name); // 输出 'Alice'

内容的提问来源于stack exchange，提问作者happy_story