Question

我有一个API，可以返回系统中用户喜爱的所有对象（GET /loves.json）。我展示了一组对象，并希望使用一次调用API来“颜色”。如果用户喜欢使用react的给定产品。到目前为止，我有：

组件/ love.js.jsx.coffee ：

class Components.Love extends React.Component
  @propTypes =
    id: React.PropTypes.number
    type: React.PropTypes.string

  constructor: (props) ->
    super(props)
    @state = Loves.Fetcher.shared()

  loved: ->
    this.state.loved(@props.id, @props.type)

  text: ->
    if @loved() then "Loved" else "Unloved"

  render: ->
    return React.DOM.div {}, @text()

爱/ fetcher.js.coffee ：

class Loves.Fetcher
  instance = null
  @shared: -> instance ?= new Loves.Fetcher

  constructor: ->
    @fetch()

  loved: (id, type) ->
    return ...

  fetch: ->
    $.get "/loved.json", (data) -> ...

的index.html ：

<h1>Shoes</h1>
<div data-react-class="Components.Love" data-react-props="{'id':1,'type':'Product'}"></div>

<h1>Pants</h1>
<div data-react-class="Components.Love" data-react-props="{'id':2,'type':'Product'}"></div>

<h1>Again</h1>
<div data-react-class="Components.Love" data-react-props="{'id':1,'type':'Product'}"></div>

<h1>Pants (Again)</h1>
<div data-react-class="Components.Love" data-react-props="{'id':2,'type':'Product'}"></div>

但是，我不确定如何继续。当状态发生变化（例如通过HTTP请求）让组件更新时，通知组件的React方法是什么？任何其他分享API结果的好方法（我绝对不希望每个爱组件都有HTTP请求）？我希望能够将爱情组件放在任何地方，而不是依赖父母/孩子的关系。

Answer 1

您可能想要开始使用Flux。在Flux架构中，您的组件将触发操作，例如getLove操作。此行为将被拦截并发送到商店，例如LoveStore。

Store包含代表应用程序模型（或部分应用程序）模型的数据。 Action修改模型。在您的情况下，由于LoveStore操作，getLove会触发GET请求，获取数据并更新模型。

更新模型后，LoveStore会发布更改。需要该数据的组件将监听LoveStore中的更改：一旦通知他们，他们就会更新其内部状态。更新其内部状态将触发render()方法。

您可以看到一些好处：

模型与您的组件分离
API可以集中在不同的文件（LoveFetcher）中，并由商店调用，商店是唯一可以访问和修改模型的实体
使用发布/订阅模式，对数据更改感兴趣的组件会听取正确的商店，就是这样
数据流是单向，这是Flux架构的一大特色，它保证了每个组件与页面模型的一致性。

Answer 2

创建一个容器组件，将数据保存为状态，并将其作为属性传递给子组件。

More info in the docs

子组件将是您编写的Components.Love类，但您必须更改这些组件，使它们没有loved作为状态，而是作为父项引入的属性成分

如何在React组件之间共享API

2 个答案: