如何向React组件传递字符串Props？为何Props会是对象？

问题根源 #

React函数组件的第一个参数永远是props对象——所有传递给组件的属性，不管是字符串、数字还是其他类型，都会被包裹进这个对象中。

你最初写的组件：

const String = (someString) => {
  return <h1>{someString}</h1>
}

这里的someString并不是你传递的原始字符串'abc'，而是包含了someString属性的props对象（即{someString: 'abc'}）。直接渲染这个对象就会触发Objects are not valid as a React child错误，因为React无法直接渲染对象类型的子元素。

不是必须用string.string的写法，有更简洁的方案 #

你可以通过以下方式避免重复的属性名写法：

1. 解构赋值props
   直接在组件参数中解构出需要的属性，这样就能直接使用变量名，无需反复引用props对象：

const String = ({ someString }) => {
  return <h1>{someString}</h1>
}

这种写法和你最初预期的逻辑一致，直接拿到传递的字符串值。

2. 利用children传递内容
   如果组件只需要渲染单个文本内容，可以把字符串作为组件的子元素传递，通过children props获取：

const String = ({ children }) => {
  return <h1>{children}</h1>
}

// 使用组件时
const App = () => {
  const someString = 'abc'
  return <String>{someString}</String>
}

3. 直接访问props对象属性（你的修改方案优化版）
   如果不解构，建议把参数名改为通用的props，避免变量名混淆，再明确访问对应属性：

const String = (props) => {
  return <h1>{props.someString}</h1>
}

总结 #

React组件接收的参数本质是props对象，所有传递的属性都挂载在这个对象上。你完全不用局限于string.string的写法，通过解构赋值或children传递，都能更简洁地获取到原始字符串值。

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