reactjsでレンダリングで変数を設定する方法は？

Question

私はreactjs rendermethodを持っていると私は関数を使用して変数を設定しようとしています、それはこの（あなたがそれを推測し、動作しない）ようになっています

私はで使用されている変数を設定するにはどうすればよい

render() { 
     let myVariable='' 

     //this function changes/sets myVariable 
     this.changeMyVariable() 

     return (
      <div>{myVariable}</div> 
     ); 
} 

上記の例のような別の関数を使ってレンダリングします。私もstatevariableを使用しようとしましたが、changeVariable関数は2回実行されます。

<div>{this.changeMyVariable()}</div>：

Answer 1

render() { 
    // assuming 'changeMyVariable' returns a value 
    const myVariable = this.changeMyVariable(); 

    return (
     <div>{myVariable}</div> 
    ); 
} 

実際にあなたのJSX自体の内部機能を呼び出すことができます。

注：this.changeMyVariable()の出力は、新たな小道具に基づいていない変化しない場合には、（コンポーネントの再描画時に再計算を避けるため）render外の値を計算した方が良いです。

Answer 2

レンダリングでローカル変数を設定することはできますが、修正のためにはpropsを使用することをお勧めします。

render() { 
    return (
     <div>{this.props.myVariable}</div> 
    ); 
} 

---

はこれを使用するには、次の方法でレンダリング

class ExampleComponent extends React.Component { 
    static propTypes = { 
     myVariable: React.PropTypes.string.isRequired, 
    };  
    static defaultProps = { 
     myVariable: 'Default Value' 
    }; 

をそして、あなたはでこのpropをレンダリング：

だから、あなたは最初のコンポーネントにプロパティ 'を宣言します' propレンダリング時：

render() { 
    <ExampleComponent myVariable='example'/> 
}