如何在React其他文件中复用Props？调用时遇渲染错误求解决

咱们先把这个错误的根源说清楚：你直接把一个包含temp、pressure这些属性的对象当成React子元素来渲染了。React可认不得这种操作——它只接受字符串、数字、React组件、数组这类合法的子元素，直接扔个对象给它，它就懵了，所以才抛出这个报错。

下面给你几个具体的解决办法，对应不同的使用场景：

1. 单独渲染对象里的某个属性 #

如果你只需要展示对象里的某几个值，直接访问对象的属性就行，比如假设你传递的props叫weatherInfo：

// 在接收props的子组件里这么写
<div>当前气温：{weatherInfo.temp}°C</div>
<div>空气湿度：{weatherInfo.humidity}%</div>
<div>最高温：{weatherInfo.temp_max}°C</div>

2. 遍历对象所有属性批量展示 #

要是想把对象里的所有键值对都列出来，可以用Object.entries()把对象转换成键值对数组，再用map遍历渲染：

function WeatherCard({ weatherData }) {
  return (
    <div className="weather-card">
      {Object.entries(weatherData).map(([key, value]) => (
        <div key={key} className="weather-item">
          <span>{key.replace('_', ' ')}：</span>
          <span>{value}</span>
        </div>
      ))}
    </div>
  );
}

这里要注意给每个遍历出来的元素加key属性，这是React列表渲染的硬性要求哦。

3. 确认props传递是否正确 #

最后别忘了检查父组件里的props传递有没有问题，确保你传的是一个结构完整的对象，比如：

// 父组件示例
import WeatherCard from './WeatherCard';

function App() {
  // 模拟接口返回的天气数据对象
  const weatherData = {
    temp: 26,
    pressure: 1012,
    humidity: 55,
    temp_min: 22,
    temp_max: 30
  };

  // 把对象作为props传递给子组件
  return <WeatherCard weatherData={weatherData} />;
}

总之记住一个核心：永远不要直接在JSX里渲染整个对象，必须把它拆解成具体的属性值，或者转换成数组后再处理~

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