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

吧，也会有类似的代码：

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

但是我需要某种代码来更改“要替换的文本”。有没有办法以某种方式做到这一点？也许与反应 DOM 或其他什么？我有点强迫自己解决这个问题，所以我可能不知道基本的基础知识，抱歉

提前致谢

4

1 回答 1

0

在 React+Meteor 中，两个兄弟组件之间的通信应该通过它们的父组件来完成。

对于您的情况，我将使用 App 组件中的状态来存储“要替换的文本”的内容，并使用 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 回答