我试图用道具左右控制属性，但不断出现错误
＆＃34;语法错误：这是一个保留字＆＃34;
我尝试了几种不同的方法（并查看了StackO上的各种示例）来解决我的问题并不断出现错误。我已经缩短了我的代码，以便在这里找到肉和土豆。
我在我的App.js中有这个，它与Pulse.js一起使用，直到我尝试传递道具
<div class="content container-fluid">
<h1 align="center">My Expertise</h1>
<div class="projects conatiner-fluid">
<div class="row">
<div class="col-xs-4" align="center">
<i class="fa fa-code fa-3x" aria-hidden="true" align="center"></i>
<div class="id1">
<h3 align="center">CODE</h3>
<p>I'm a versatile programmer with knowledge and interest to learn and code in any language</p>
</div>
</div>
<div class="col-xs-4" align="center">
<i class="fa fa-desktop fa-3x" aria-hidden="true" align="center"></i>
<div class="id2">
<h3 align="center">UI/UX</h3>
<p>I'm a front-end developer and UI/UX designer who loves building and designing websites from scratch</p>
</div>
</div>
<div class="col-xs-4" align="center">
<i class="fa fa-cogs fa-3x" aria-hidden="true" align="center"></i>
<div class="id3">
<h3>Machine Learning</h3>
<p>I'm keenly interested in machine learning and I have implemented a project to detect Hand-written digits using python</p>
</div>
</div>
</div>
</div>
<div class="projects">
<div>
<h1 align="center">Portfolio</h1></div>
<div class="conatiner-fluid">
<div class="row">
<div class="col-xs-4" align="center">
<a href="http://codepen.io/nilabja10201992/full/LymmKO/"><img src="http://i68.tinypic.com/mw5vki.png" class="img-responsive" align="center" alt="Nikola Tesla"> </a>
</div>
<div class="col-xs-4" align="center">
<a href="http://codepen.io/nilabja10201992/full/LymmKO/"><img src="http://i68.tinypic.com/mw5vki.png" class="img-responsive" align="center" alt="Nikola Tesla"> </a>
</div>
<div class="col-xs-4" align="center">
<a href="http://codepen.io/nilabja10201992/full/LymmKO/"><img src="http://i68.tinypic.com/mw5vki.png" class="img-responsive" align="center" alt="Nikola Tesla"> </a>
</div>
</div>
</div>
<div class="conatiner-fluid">
<div class="row">
<div class="col-xs-4" align="center">
<a href="http://codepen.io/nilabja10201992/full/LymmKO/"><img src="http://i68.tinypic.com/mw5vki.png" class="img-responsive" align="center" alt="Nikola Tesla"> </a>
</div>
<div class="col-xs-4" align="center">
<a href="http://codepen.io/nilabja10201992/full/LymmKO/"><img src="http://i68.tinypic.com/mw5vki.png" class="img-responsive" align="center" alt="Nikola Tesla"> </a>
</div>
<div class="col-xs-4" align="center">
<a href="http://codepen.io/nilabja10201992/full/LymmKO/"><img src="http://i68.tinypic.com/mw5vki.png" class="img-responsive" align="center" alt="Nikola Tesla"> </a>
</div>
</div>
</div>
</div>
<div class="education">
<div>
<h1 align="center">My Education</h1>
</div>
<div class="projects container-fluid">
<div class="row">
<div class="col-xs-4" align="center">
<i class="fa fa-graduation-cap fa-1x" aria-hidden="true" align="center"></i>
<div class="id1">
<h3 align="center">Secondary Education</h3>
<p>Passed out secondary education with a percentage of 89.6% from ICSE board</p>
</div>
</div>
<div class="col-xs-4" align="center">
<i class="fa fa-graduation-cap fa-2x" aria-hidden="true" align="center"></i>
<div class="id2">
<h3 align="center">High Secondary Education</h3>
<p>Passed out higher secondary education from CBSE board with science as stream scoring 85%</p>
</div>
</div>
<div class="col-xs-4" align="center">
<i class="fa fa-graduation-cap fa-3x" aria-hidden="true" align="center"></i>
<div class="id3">
<h3>Undergraduate</h3>
<p>Graduate from Jalpaiguri Goevrnment Engineering College with Bachelor in Information Technology with a CGPA of 8</p>
</div>
</div>
</div>
</div>
</div>
<div class="hireme" align="center">
<p>Want to get in touch with me, please fill the contact information and I'll respond as soon as possible
<p>
<button type="button" class="btn1">
<span>I'm Available for Hire</span>
</button>
</div>
<div class="mylinks" align="center">
<footer>Designed and Coded by <a href="https://www.freecodecamp.com/nilabja10201992"><em>Nilabja Bhattacharya</em></a></footer>
<div class="icons" align="center">
<a href="https://github.com/nilabja10201992"><i class="fa fa-github" aria-hidden="true"></i></a>
<a href="https://www.freecodecamp.com/nilabja10201992"><i class="fa fa-free-code-camp" aria-hidden="true"></i></a>
<a href="https://www.quora.com/profile/Nilabja-Bhattacharya"><i class="fa fa-quora" aria-hidden="true"></i></a>
<a href="https://codepen.io/nilabja10201992/"><i class="fa fa-codepen" aria-hidden="true"></i></a>
<a href="https://www.linkedin.com/in/nilabja10201992/"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a href="http://stackoverflow.com/users/6157670/nilabja-bhattacharya?tab=profile"><i class="fa fa-stack-overflow" aria-hidden="true"></i></a>
</div>
</div>
</div>
这是Pulse.js的代码
class App extends Component {
render() {
return (
<div className="App">
<Nav />
<Content />
<Pulse top="-124" left="300" />
</div>
);
}
}
export default App;
当我进入＆＃34; this.props.top＆＃34;作为我的风格，我得到了我的错误。我已经尝试了各种方法来解决这个问题并继续提出错误。谢谢你的帮助！
答案 0 :(得分：3)
<Star style={{top: {this.props.top} + 'em'}}></Star>
在{}
this.props.top
<Star style={{top: this.props.top + 'em'}}></Star>
更多解释：
JSX是一种“DSL”，一种特定于域的语言。这不是Javascript。在JSX中，您可以将vanilla Javascript表达式放在花括号中的某些位置，例如
<Star style={...vanilla javascript expression...} />
一旦你进入花括号内，就不需要额外的花括号来读取变量了。你可以引用this.props.top而不用更大括号括起来。
当您使用以下语法时：{this.props.top}编译器会感到困惑，认为您正在尝试构建像{a: 'b'}这样的javascript对象，而不是a，而是尝试使用单词this，这是Javascript中的保留字。编译器认为您正在尝试执行无效的{this: this}之类的操作，因为单词this是保留字。