（React + Meteor）他のdivのコンテンツを編集しますか？

Question

私は現在、私の流星アプリのための私の「指標」としてこれを持っている：

import React from 'react'; 

export const App = React.createClass({ 
    propTypes: { 
    children: React.PropTypes.element.isRequired, 
    }, 
    render() { 
    return <div className="app-div"> 
     **<Foo/>** 
     **<Bar/>** 
     { this.props.children } 
    </div>; 
    }, 
}); 

私は何とか「バー」でのコードを、「フー」の内容を変更することができる場合、私は疑問に思って。

基本的に、「foo」が、このようなコードになります：

export class Foo extends React.Component { 
    render() { 
    return(
     <div className="test">TEXT TO BE REPLACED</div> 
    ); 
    } 
} 

バーを、また、同様のコードがあります：

export class Bar extends React.Component { 
    render() { 
    // Code goes here to change that div "test"'s content in Foo^^^^^^ 
    return(
     <div>...</div> 
    ); 
    } 
} 

をしかし、私は変更するコードのいくつかの並べ替えを持っている必要があります」テキストを置換する "。何とかこれを行う方法はありますか？たぶん反応したDOMなどで？ +流星反応し、2人の兄弟コンポーネント間の通信は、親を介して行われるべきで、事前には

Answer 1

私は一種これを通じて自分の道を強制的に野獣のよ、私は基本的な基礎を知らないかもしれない、申し訳ありません

感謝。

あなたのケースのために、私はその状態の内容を更新するために、「REPLACEれるテキスト」、およびアプリケーションコンポーネント内の機能の内容を保存するためにアプリケーションコンポーネントの状態を使用するには：

import React from 'react'; 

export const App = React.createClass({ 
    propTypes: { 
    children: React.PropTypes.element.isRequired, 
    }, 
    getInitialState() { 
    return { 
     fooText: '', 
    }; 
    }, 
    updateFooText(value) { 
    this.setState({ 
     fooText: value, 
    }); 
    }, 
    render() { 
    return (
     <div className="app-div"> 
     <Foo text={this.state.fooText} /> 
     <Bar updateFooText={this.updateFooText} /> 
     { this.props.children } 
     </div> 
    ); 
    }, 
}); 

export class Foo extends React.Component { 
    render() { 
    return (
     <div className="test">{this.props.text}</div> 
    ); 
    } 
} 

export class Bar extends React.Component { 
    onChangeHandler(e) { 
    this.props.updateFooText(e.target.value); 
    }, 
    render() { 
    // Code goes here to change that div "test"'s content in Foo^^^^^^ 
    return (
     <div> 
     <input type="text" onChange={this.onChangeHandler} /> 
     </div> 
    ); 
    } 
}