Question

我有一个像

这样的属性的对象

weather.name = 'Coudy'
weather.country= 'USA'

目前我在ES6中使用Object destructuring，但你可以看到它非常冗长。我想知道是否有可能以更简洁的方式重写此代码。

注意：我正在使用babel和

  "presets": ["es2015", "react", "stage-2"]

const Weather = ({ weather }) => {
  let {
    name,
    country,
    temperature,
    temperatureMin,
    temperatureMax,
    weatherMain,
    weatherDescription,
    weatherIcon,
    updatedTime,
    windDegree,
    windSpeed,
    visibility
 } = weather
  return (<div>
    { name }, { country }
    { temperature }
    { temperatureMin }
    { temperatureMax }
    { weatherMain }
    { weatherDescription }
    { weatherIcon }
    { updatedTime }
    { windDegree }
    { windSpeed }
    { visibility }
  </div>
  )
}

export default Weather

Answer 1

是的，参数解构可能。可以有效地跳过weather临时变量（也Weather - 它不是构造函数）：

export default ({ weather: {
    name,
    country,
    temperature,
    temperatureMin,
    temperatureMax,
    weatherMain,
    weatherDescription,
    weatherIcon,
    updatedTime,
    windDegree,
    windSpeed,
    visibility
 } }) => (<div>
    { name }, { country }
    { temperature }
    { temperatureMin }
    { temperatureMax }
    { weatherMain }
    { weatherDescription }
    { weatherIcon }
    { updatedTime }
    { windDegree }
    { windSpeed }
    { visibility }
  </div>)

在解构期间，所有属性名称仍应写入两次，这在这里是件好事。这允许从对象中仅选择已知属性。如果某些使用过的道具没有被破坏或者返回值拼写错误，则会引发错误。如果一些结构化的道具没有被意外使用，这可以通过IDE或者linter来表示。

Answer 2

这是不安全的，因为它使用eval函数，但您可以执行以下操作：

const Weather = ({ weather }) => {
  eval(
    "var " +
    Object
      .keys(weather)
      .map(key => key + "="+ JSON.stringify(weather[key]))
      .join(', '));

  return (<div>
          {name}, {location}, 
          {anyAttribute.join(', ')}
  </div>
  )
};

ReactDOM.render(
  <Weather weather={{
    name: "lalala",
    location: "dadada",
    anyAttribute: [1,2,3]}} />,
  document.getElementById("root")
);

反应和es6中更好的对象解构

2 个答案: