指定する変数は、外の中にレンダリング

Question

import React from 'react'; 
import ReactDOM from 'react-dom'; 

class Parent extends React.Component { 
    let name=this.props.name; 

    render() { 
     return (
      <h1> 
       {name} 
      </h1> 
    ); 
    } 
} 

ReactDOM.render(
    <Parent name="Luffy"/>, 
    document.getElementById('app') 
);e 

こんにちはすべては、私が反応するように新たなんだと私は問題でこだわっているクラスに反応して、私は小道具を通じて名前を表示したかったが、私は内部name=this.props.nameを使用する場合、動作していないそのそれがうまく動作しますが、レンダリングの外にその値を取得する方法（）レンダリング、事前

Answer 1

に助けと感謝して下さいESウィキ

によるとは直接の宣言的な方法は、（意図的に）はありませんを定義するプロトタイプデータプロパティ（メソッド以外）のクラスプロパティ、または インスタンスプロパティ

クラスプロパティとプロトタイプデータプロパティは、宣言の 以外に作成する必要があります。彼らはオブジェクトリテラルに登場したかのようにクラス定義で指定された

プロパティは同じ 属性が割り当てられています。

クラス定義では、プロトタイプメソッドを定義しています。プロトタイプ上の変数を定義するのは、一般的にあなたが行うことではありません。

レンダリングの外の値を取得するには、コンストラクタで変数を持っているし、その後Es7 initializersで

class Parent extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 
     this.name = props.name 
 
    } 
 
    render() { 
 
     return (
 
      <h1> 
 
       {this.name} 
 
      </h1> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <Parent name="Luffy"/>, 
 
    document.getElementById('app') 
 
);

<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='app'></div>

のように、その値にアクセスすることができます。あなたが小道具に基づいて値を代入しているので、あなたが、しかし

class Parent extends React.Component { 
 
    name = this.props.name 
 
    render() { 
 
     return (
 
      <h1> 
 
       {this.name} 
 
      </h1> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <Parent name="Luffy"/>, 
 
    document.getElementById('app') 
 
);

<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='app'></div>

を行うことができ、理想的な方法は、ライフサイクルの機能を利用すると、それを使用することです。状態で更新したい場合は、componentWillMountとcomponentWillReceiveProps機能でこのロジックを使用する方がよいでしょう。あなたが唯一の変数を更新し、レンダリングで、それを使用したい場合は

はしかし、最高の場所は、レンダリング関数自体

class Parent extends React.Component { 
 
    state = { 
 
     name: '' 
 
    } 
 
    componentWillMount() { 
 
     this.setState({name:this.props.name}); 
 
    } 
 
    componentWillReceiveProps(nextProps) { 
 
     this.setState({name: this.props.name}); 
 
    } 
 
    render() { 
 
     return (
 
      <h1> 
 
       {this.state.name} 
 
      </h1> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <Parent name="Luffy"/>, 
 
    document.getElementById('app') 
 
);

<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='app'></div>

または

class Parent extends React.Component { 
 
    
 
    render() { 
 
     let name = this.props.name 
 
     return (
 
      <h1> 
 
       {name} 
 
      </h1> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <Parent name="Luffy"/>, 
 
    document.getElementById('app') 
 
);

<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='app'></div>

でそれを持っていることです

Answer 2

import React from 'react'; 
import ReactDOM from 'react-dom'; 

class Parent extends React.Component { 
    let name=props.name; // no need to use this.props.name 
    /* but a better way is to directly use {this.props.name} 
     inside the <h1> tag if you are not manipulating the data. 
    */ 
    render() { 
     return (
      <h1> 
       {name} 
      </h1> 
    ); 
    } 
} 

ReactDOM.render(
    <Parent name="Luffy"/>, 
    document.getElementById('app') 
);