0

現在、Meteor アプリの「インデックス」としてこれを持っています。

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>;
  },
});

「Bar」のコードを使用して、「Foo」の内容をどうにか変更できるかどうか疑問に思っています。

基本的に、「Foo」は次のようなコードになります。

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

Bar にも同様のコードがあります。

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

しかし、「TEXT TO BE REPLACED」を変更する何らかのコードが必要です。どういうわけかこれを行う方法はありますか？多分反応DOMか何かで？私はこれを強引にやってのけるようなものなので、基本的な基礎を知らないかもしれません、ごめんなさい

前もって感謝します

4

1 に答える 1

0

React+Meteor では、2 つの兄弟コンポーネント間の通信は、それらの親を介して行う必要があります。

あなたの場合、Appコンポーネントの状態を使用して「TEXT TO BE REPLACE」のコンテンツを保存し、Appコンポーネント内の関数を使用してその状態のコンテンツを更新します。

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>
    );
  }
}
于 2016-11-15T08:55:45.687 に答える