javascript - 为什么道具不能使用渲染作为胖箭头函数 - Thinbug

为什么道具不能使用渲染作为胖箭头函数

时间：2017-07-31 08:24:19

标签： javascript reactjs

我正在按照教程编写我的第一个React应用程序。

我加入了Babel，我希望它能够传达JSX和ES6的功能。在我的组件中，我使用胖箭头语法进行渲染功能。 props不会渲染但是当一切都很好时，使用旧的函数样式。

有什么问题？

这是我的代码：

使用Fat arrow语法

var Greeter = React.createClass({
  render : ()=>{
    var name =this.props.name;
    return(
      <div>
        <h1>Hello {name} !</h1>
        <p>This is form the component !!</p>
      </div>
    );
  }
});
ReactDOM.render(
 <Greeter name="Henry"/>,
  document.getElementById('app')
);
//nothing renders in browser

没有胖箭头语法：

var Greeter = React.createClass({
  render : function(){
    var name =this.props.name;
    return(
      <div>
        <h1>Hello {name} !</h1>
        <p>This is form the component !!</p>
      </div>
    );
  }
});
ReactDOM.render(
 <Greeter name="Henry"/>,
  document.getElementById('app')
);


//Every thing renders well in browser

通天塔设置

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
</head>

<body>

  <div id="app"></div>
  <script type="text/babel" src="app.jsx"></script>
</body>

</html>

0 个答案:

没有答案