Question

我在我的应用中使用反应和骨干模型。为了相互通信，我使用了更高阶的组件（https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750）。

假设我有一个骨干模型：

class Item extends Backbone.Model {
  defaults() {
    return {
      id: null,
      name: 'item',
      subItems: [],
      link: null
    };
  }

  // This is sample API response to GET /item/1
  {
    id: 1,
    name: 'item1',
    link: '/item/1',
    subItems: [{
      id: 2,
      name: 'item2',
      link: '/item/2', 
      subItems: []
    }, {
      id: 3,
      name: 'item3',
      link: '/item/3', 
      subItems: []
    }]
  }

  // This is sample API response to GET /item/2
  {
    id: 2,
    name: 'item2',
    link: '/item/2', 
    subItems: []
  }
}

并反应成分：

class ItemComponent extends React.Component {
  constructor(props, context) {
    super(props, context);
  }

  onClickLink(link, e) {
    e.preventDefault();
    this.context.router.transitionTo(link);
  }

  render() {
    const itemData = this.props.data.toJSON();
    const itemNodes = itemData.map(function(item) {
      return (
        <li><a href='' onClick={this.onClickLink.bind(this, item.link)}>{item.name}</a></li>
      );
    });

    return (
      <div>
        <span>{itemData.name}</span>
        <ul>{itemNodes}</ul>
      </div>
    );
  }
}

ItemComponent.contextTypes = {
  router: React.PropTypes.func.isRequired
};

我有更高级别的组件

const item = new Item();
const NewComponent = connectToModel(ItemComponent, item);

，其中

function connectToModel(Component, model) {
  class ComponentConnection extends React.Component {
    constructor(props, context) {
      super(props, context);
      this.state = {
        data: model
      };
    }

    componentDidMount() {
      model.on('add remove change', this.onModelChange.bind(this));
    }

    componentWillUnmount() {
      model.off(null, null, this.onModelChange.bind(this));
    }

    onModelChange() {
      this.setState({
        data: model 
      });
    }

    render() {
      return (
        <Component
          {...this.state}
          {...this.props}
        />
      );
    }
  }
}

我的路线：

const Routes = (
    <Route handler={App} path="/">
      <Route name="item" path="item/:id" handler={Item} />
    </Route>
);

我的问题：

当用户请求网址/item/1时，如何在呈现之前调用API来获取数据，而不是const item = new Item();我会调用类似const item = new Item({id: 1});的内容。
< / LI>
当用户点击一个子项目时，路由器会将他送到例如/item/2，但是我如何告诉我的反应组件路由参数已经改变因此获取新模型覆盖我当前的模型并提供新数据。

Answer 1

我不确定100％它如何与商店一起使用，但我一直在做的方式是在组件上使用静态来说明需要调用哪些API，然后获取该数据在路由实际呈现组件并将结果数据作为道具传递给它之前。因为每次转换都会激活路由器，只要您的API基于查询或参数中的数据，它就会始终获取相关数据。

这个回购非常重要，帮助我开始...... Mega React Router Demo

react + backbone + react-router，取模型

1 个答案: