2016-08-24 33 views
3

私はreact-draggabeを使用しています。子コンポーネントに機能を追加するというアイデアは、<Draggable>のように別のコンポーネントにラップすることができます。 このコンポーネントは、クールな独自の状態を管理します。このように私は何も気にする必要はありません。子コンポーネントの状態を取得する

ただし、イベントが発生したときにドラッグされた要素の現在位置を取得する必要があります(ユーザーが別の子コンポーネントのどこかのボタンをクリックするなど)。 私はonStopハンドラを使用して、親elemetの状態で新しい位置を保存することができます。しかしそれは問題です:私は親にも保存するので、私はドラッグ可能なコンポーネントの状態を複製します。私はそれをしたくない。

これを実行する反応は何ですか?
私は新しいことを熟知しており、この考え方は良い説明に感謝しています。

答えて

7

あなたはrefsでそれを行うことができます:私は状態は子コンポーネントを形成アクセスする例であなたのためにfiddleを作った

var Foo = React.createClass({  
    componentDidMount() { 
    console.log(this.refs.bar.baz) // "qux" 
    }, 
    render() { 
    return (
     <div> 
     <Bar ref="bar" /> 
     </div> 
    );  
    } 
}); 



var Bar = React.createClass({ 
    getInitialState: function() { 
    return {baz: 'qux'}; 
    } 
}); 

。 1つのコンポーネントが値をインクリメントし、兄弟コンポーネントはそれをレンダリングし、親コンポーネントからprops/refsを介してこの値にアクセスします。

+0

親子関係のための良い解決策のように見えますが、親子孫よりも深い場合は複雑になります。しかし、これは私の問題を洗練された方法で解決します。ありがとうございました! – Fuzzyma

+3

これらのより複雑なシナリオでは、ReduxやMobxのような状態管理ライブラリを使いたいと思うでしょう。 – AMilassin

+1

はい、あなたは、コンポーネントツリーであまりにも深いデータを渡す必要はないと言いましたので、私はあなたに最も簡単な解決策を提案しました。状況が複雑になる場合は、店舗や「コンテキスト」を使用することができます(推奨されていません。実験的な機能です)。 –

関連する問題