反応クラス：同じコンポーネント内で変数を渡すにはどうすればいいですか？

Question

私はReactJSを学習しており、同じコンポーネントの中に変数を渡す必要があります。ここで

だから例

var DataBase = [ 
    { 
     position: 1 
    }, 
    { 
     position: 2 
    }, 
    { 
     position: 3 
    }, 
    { 
     position: 4 
    } 
]; 

var Component = React.createClass({ 

    getDefaultProps: function() { 
     var counter = 0; 
    }, 

    componentDidMount: function() { 
     var dbPos = this.props.db[counter+1].position; 
     return dbPos; 
    }, 

    render: function() { 
     return (
      <div className="Component"> 
       {this.dbPos} 
      </div> 
     ); 
    } 
}); 

ReactDOM.render(
    <Component db={DataBase} />, 
    document.getElementById('main') 
); 

だ、これは明らかに動作しません。私が必要としているのは、componentDidMountで作成したvar dbPosをrenderに渡すことです（onClickのようなイベントはありません）。これは、setTimeout（）を使用して各位置で10秒のように時間駆動されます。

これは可能ですか？どうやって？より良い解決策はありますか？私はあなたのすべての助けに感謝します。

Answer 1

この問題は、の状態処理と考えられます。 Reactアプリケーションでアプリケーションの状態を処理する方法は複数ありますが、dbPosをコンポーネントの状態の一部として保持することを前提としています（将来はそれを変更する可能性があります）。これを達成するには、単にthis.setStateとthis.stateを使用してください。

私は一例を示した前に、私はあなたのコードスニペットでは他のいくつかのミスを述べます：

• getDefaultPropsは小道具のハッシュオブジェクトを返し、ないVARでそれらを宣言する必要があります（つまり、彼らはにスコープになるだろうコンポーネントインスタンスではなくメソッド）
• counterは、小道具としてthis.props.counterと呼ばれる必要があります。 counterはこのコンポーネントの状態の一部ではなく、コンポーネントツリーの上位レベルのその小道具のそれぞれの変更でのみ変更できます。念頭に置いて

：

var Component = React.createClass({ 

    getDefaultProps: function() { 
     return {counter: 0}; 
    }, 

    componentDidMount: function() { 
     var dbPos = this.props.db[this.props.counter+1].position; 
     this.setState({ // change the state of this component 
      dbPos: dbPos 
     }) 
    }, 

    render: function() { 
     return (
      <div className="Component"> 
       {this.state.dbPos} 
      </div> 
     ); 
    } 
}); 

---

あなたはdbPosは、単に、コンポーネントの状態の一部として変異させることを意図しpositionを取得するための新しい方法を作成したくない場合。ここには変更可能な状態は関係しません。

var Component = React.createClass({ 

    getDefaultProps() { 
    return {counter: 0}; 
    }, 

    componentDidMount() { 
    // no longer needed 
    },  
    getPosition() { 
    return this.props.db[this.props.counter + 1].position; 
    }, 

    render() { 
    return (
     <div className="Component"> 
      {this.getPosition()} 
     </div> 
    ); 
    } 
});