对象解构会引发错误

时间:2018-04-18 03:12:46

标签: javascript reactjs ecmascript-6 styled-components

我将样式对象传递给组件

<Temp styles={{fontWeight: 'bold', fontSize: '1.6'}} ...otherprops />

当我尝试解构它时,它会给我一个错误Cannot read property 'fontSize' of undefined

我解构它的方式如下:

{({styles: {fontSize, fontWeight}}) => /* use the values */ }

我没有得到的部分是,当我记录样式时,它会显示正确的值,就在我尝试解构它时会抛出错误。

1 个答案:

答案 0 :(得分:3)

以下输出16 2对我来说;我在你提供的代码片段中看到的唯一问题是我在评论中指出的左括号:

class App extends React.Component {
  render() {
    return <Temp styles={{ fontSize: 16, fontHeight: 2 }} />;
  }
}

const Temp = ({ styles: { fontSize, fontWeight }}) => {
  console.log(fontSize, fontWeight);
  return <p>Hi</p>;
};

ReactDOM.render(
  <App />,
  document.getElementById('root')
);