render函数中return如果没有使用()会有什么问题?
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了render函数中return如果没有使用()会有什么问题?,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2694字,纯文字阅读大概需要4分钟。
内容图文
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
render进行return时,对于单行的内容,没必要加括号,但对于多行的内容要加括号
原因在于,JSX转为js后,js会在每行自动加';'
,如果return后换行了,那么就会变成return;
下面通过babel来做一下编译:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
//********************
var Welcome = /*#__PURE__*/function (_React$Component) {
_inherits(Welcome, _React$Component);
var _super = _createSuper(Welcome);
function Welcome() {
_classCallCheck(this, Welcome);
return _super.apply(this, arguments);
}
_createClass(Welcome, [{
key: "render",
value: function render() {
return /*#__PURE__*/React.createElement("h1", null, "Hello, ", this.props.name);
}
}]);
return Welcome;
}(React.Component);
做下对比
class Welcome extends React.Component {
render() {
return
<h1>Hello, {this.props.name}</h1>;
}
}
//******************
var Welcome = /*#__PURE__*/function (_React$Component) {
_inherits(Welcome, _React$Component);
var _super = _createSuper(Welcome);
function Welcome() {
_classCallCheck(this, Welcome);
return _super.apply(this, arguments);
}
_createClass(Welcome, [{
key: "render",
value: function render() {
return;
/*#__PURE__*/
React.createElement("h1", null, "Hello, ", this.props.name);
}
}]);
return Welcome;
}(React.Component);
所以针对文章开头举的app的例子,如果不加括号的话,是需要右内容和return在同一行的,就像下面这样
class App extends Component {
render() {
return <div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
}
}
这样写也是可以编译通过的,但如果不加括号,还在return后换行了,那就会报错
class App extends Component {
render() {
return
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
}
}
另外还要注意的一点是,对于return的内容,只能有一个根节点,所以返回的内容必须有一个tag进行包裹,否则,不管加不加括号都是不行的,编译报错的描述也很直观了
内容总结
以上是互联网集市为您收集整理的render函数中return如果没有使用()会有什么问题?全部内容,希望文章能够帮你解决render函数中return如果没有使用()会有什么问题?所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。