Question

我有一个关于反应方式的问题。

我有两个组成部分。例如：App＆amp;浏览器。

App是一般组件。它加载内部模块并呈现应用程序树结构
浏览器是App的内部组件。它通过ID显示一些提取的数据。

应用程序组件对于当前在浏览器组件中呈现的内容和ID数据并不重要。应用程序并不想控制浏览器组件的导航。浏览器大多是独立的。

但有时候App想要做其中一件事：

要求浏览器组件刷新（再次获取数据+渲染数据）活动页面
要求Browser-component加载特定ID

我不知道如何使用带道具的反应方式来做到这一点。

一些代码例如：

class App extends Component {
  render(){
    return ... <Browser server={this.server}/> ...;
  }
}

class Browser extends Component {
  constructor(props){
     super(props);
     this.state = { id: 'default' };
  }

  componentDidMound() { this.checkData(); }
  componentWillUpdate() { this.checkData(); }

  async checkData(){
      if(!this.state.data}{
          const data = await this.props.server.fetch(this.state.id);
          this.setState({ data });
      }
  }

  onChange(newId){
     this.setState({ data: null, id: newId });
  }

  render(){
    return <div>
        <Page data={this.state.data}/>
        <Navigation activeId={this.state.id} onChange={::this.onChange}/>
    </div>;
  }
}

我有一些不好的主意。例如：

我可以通过ref-attribute将Browser设置为App。并直接运行所需的方法
我可以使用全局变量
我可以在Browser-component中提供空{} -object。在浏览器组件初始化中，将所有需要的方法设置到此对象中。最后从App

我认为所有这些变种都没有反应。我怎么能做对的？我不会在这个项目中使用redux。刚刚做出反应。

Answer 1

我找到了一个有趣的决定。我可以将observer-method传递给子组件。例如：

class App extends Component {
    constructor(props){
        super(props);
        this.subscribers = [];
    }

    subscribe = id => { this.subscribers.push(id); }

    anyMethod(){
        // ...
        for(let fn of this.subscribers)
            fn(newId);
        // ...
    }

    render(){
        return <div>...<Browser subscribe={this.subscribe} />...</div>
    }
}

class Browser extends Component {
    constructor(props){
        super(props);
        props.subscribe(id => { this.forceLoad(id); })
    }
}

它就像从父组件获得的内部组件的API：）

如何在React.js

1 个答案: