React 内联样式不适用于 props

Question

我试图用 props 控制左右属性，但不断出现错误

“语法错误：这是保留字”

我尝试了几种不同的方法（并查看了 StackO 上的各种示例）来解决我的答案并不断出现错误。我已经缩短了我的代码以了解这里的主要内容。

我的 App.js 中有这个，它可以与 Pulse.js 一起使用，直到我尝试传递 props

class App extends Component {
 render() {
  return (
   <div className="App">
     <Nav />
     <Content />
     <Pulse top="-124" left="300" />
   </div>
  );
 }
}

export default App;

这是 Pulse.js 的代码

class Pulse extends React.Component {
  render() {
    return (
      <Star style={{top: {this.props.top} + 'em'}}></Star>
    );
  }
}

export default Pulse;

当我输入“this.props.top”作为我的样式时，我收到错误。我尝试了各种方法来解决这个问题，但仍然出现错误。感谢您的帮助！

Answer 1

<Star style={{top: {this.props.top} + 'em'}}></Star>

删除语法上无效的{}环绕this.props.top

<Star style={{top: this.props.top + 'em'}}></Star>

更多解释：

JSX 是一种“DSL”，一种领域特定语言。这不是 JavaScript。在 JSX 中，您可以在某些地方将普通 Javascript 表达式放在大括号内，例如

<Star style={...vanilla javascript expression...} />

一旦进入大括号内，就不需要额外的大括号来读取变量。您可以引用this.props.top而无需将其括在更多花括号中。

当您使用此语法时：{this.props.top}编译器会感到困惑，认为您正在尝试构建一个类似于{a: 'b'}但不是 的javascript 对象a，而是尝试使用单词this，这是 Javascript 中的保留字。编译器认为您正在尝试执行类似{this: this}无效的操作，因为裸字this是保留字。