对象解构抛出错误

Question

我正在将样式对象传递给组件

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

当我尝试解构它时，它给我一个错误提示 Cannot read property 'fontSize' of undefined。

我解构的方式如下：

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

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

Answer 1

以下输出 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')
);

对象解构抛出错误

object deconstructing throws an error

javascript

ecmascript-6

reactjs

styled-components