Question

为什么这在render方法之外不起作用

 class MyComponentClass extends React.Component{
        const n = Math.floor(Math.random()* 10 + 1);
        render(){
            return <h1>The number is {n}</h1>
    }
}
ReactDOM.render(<MyComponentClass/>,document.getElementById("app"));

但是它可以在内部使用吗？

 class MyComponentClass extends React.Component{
        render(){
            const n = Math.floor(Math.random()* 10 + 1);
            return <h1>The number is {n}</h1>
    }
}
ReactDOM.render(<MyComponentClass/>,document.getElementById("app"));

Answer 1

因为在第一个中，您要使用新的提案定义类属性：class-fields您不能在那里使用const。尝试这样：

n = Math.floor(Math.random()* 10 + 1);

然后您可以通过以下方式访问它：

this.n

我不知道为什么这个答案会被否决，但是通过适当的设置，例如像Babel这样的class-fields插件，我们可以使用它。

class App extends React.Component {
  n = Math.floor(Math.random() * 10 + 1);
  render() {
    return <div>{this.n}</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

除了在不使用class-fields提议的情况下在构造函数中初始化属性外，这没有什么不同。

class App extends React.Component {
  constructor( props ) {
    super( props );
    this.n = Math.floor(Math.random() * 10 + 1);
  }
  
  render() {
    return <div>{this.n}</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

在render方法之外创建变量时出现错误

1 个答案: