render函数中return如果没有使用()会有什么问题?
2021/4/19 18:27:54
本文主要是介绍render函数中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> ); } }
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如果没有使用()会有什么问题?的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28微服务架构中API版本控制的实践
- 2024-09-28AI给的和自己写的Python代码,都无法改变输入框的内容,替换也不行
- 2024-09-27Sentinel配置限流资料:新手入门教程
- 2024-09-27Sentinel配置限流资料详解
- 2024-09-27Sentinel限流资料:新手入门教程
- 2024-09-26Sentinel限流资料入门详解
- 2024-09-26Springboot框架资料:初学者入门教程
- 2024-09-26Springboot框架资料详解:新手入门教程
- 2024-09-26Springboot企业级开发资料:新手入门指南
- 2024-09-26SpringBoot企业级开发资料新手指南