在 React 中定义内联样式，SyntaxError: Unexpected token [英] Defining inline style in React, SyntaxError: Unexpected token

问题描述

尝试在页面设置上禁用滚动时 style='overflow-y: auto;':

render() {返回 (<div style={{overflow-y: auto}}><div>{this.props.title}</div><div>{this.props.children}</div>

);}

Webpack 出现错误:

我能在这里做什么?如果由于某种原因我们不能设置 overflow-y，那么我们如何在 React 应用程序中禁用网页滚动(我也在使用 React-Bootstrap)

解决方案

样式属性按照 文档.

因此，在普通 css 中用连字符 (-) 分隔单词的任何地方，当我们在 react 样式对象中使用它时，都应该将它们更改为驼峰式大小写.

例如.

overflow-y ->溢出溢出-x ->溢出X背景图像 ->背景图片

我们将样式作为对象插入.

因此 css 属性将是 javascript 对象的属性.

在定义 javascript 对象属性或变量名称时，连字符 (-) 是非法字符.这就是为什么应该在 camel-Case 中使用它.

While trying to disable scrolling on the page setting style='overflow-y: auto;':

render() {
    return (
      <div style={{overflow-y: auto}}>
        <div>{this.props.title}</div>
        <div>{this.props.children}</div>
      </div>
    );
}

Webpack is giving an error:

What could I do here? If we can not set overflow-y for some reason, then how could we disable scrolling of a web page in React app (I am also using React-Bootstrap)

解决方案

The style attributes should be in camel case according to the documentation.

So anywhere we delimit the words with hyphen (-) in normal css we should use change them to camel case when we use it inside a react style object.

For example.

overflow-y -> overflowY
overflow-x -> overflowX
background-image -> backgroundImage

We insert the styles as an object.

so the css properties will be attributes of an javascript object.

hyphen(-) is an illegal character when defining javascript object attributes or variable names. That's why it should be used in camel-Case.

这篇关于在 React 中定义内联样式，SyntaxError: Unexpected token的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！