代码之家 › 专栏 › 技术社区 › Strahinja Ajvaz

对象解构引发错误

styled-components ecmascript-6 reactjs javascript

Strahinja Ajvaz · 技术社区 · 6 年前

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

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

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

我解构它的方式如下:

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

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

1 回复 | 直到 6 年前

Anthony 6 年前

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前