問題：

有沒有辦法有一個標(biāo)準(zhǔn)的助焊劑工作流程 – 在組件內(nèi)部使用動作和商店,仍然能夠?qū)⑦@個組件用于多種不同的目的,或者如果沒有,有沒有辦法在助焊劑反應(yīng)應(yīng)用程序中使用復(fù)雜的嵌套結(jié)構(gòu)通過巨大的回調(diào)管道傳播每一個變化？

示例(如果問題不夠清楚)：

假設(shè)我有一些超級簡單的自定義組件,如ToggleButton,Slider,DatePicker等等.它們需要可重用,所以我不能在它們內(nèi)部使用任何動作,而是我定義了回調(diào)函數(shù).例如,DatePicker上的onChange會像這樣觸發(fā)：

this.props.onChange(data);

我有一個自定義組件讓我們稱之為InfoBox,其中包含上面描述的幾個簡單組件.該組件偵聽每個子節(jié)點(diǎn)的更改,如下所示：

<DatePicker ref='startDate' onChange={this.startDate_changeHandler} />

InfoBox用于不同的目的,所以我猜它也不能綁定到特定的商店.

我還有一個自定義Grid組件,它可以呈現(xiàn)InfoBox的許多實(shí)例.此網(wǎng)格用于在不同頁面上顯示不同的數(shù)據(jù),每個頁面可以有多個網(wǎng)格 – 所以我認(rèn)為我不能將它與Actions和Stores綁定.

現(xiàn)在這里一切都變得瘋狂,忍受我 – 我有幾頁 – 客戶,產(chǎn)品,文章等.每個人都有至少一個網(wǎng)格,每個網(wǎng)格都有一些過濾器(如搜索).

頁面肯定可以使用動作和存儲,但頁面之間有很大的相似之處,我不想復(fù)制那么多代碼(不僅是方法,還有標(biāo)記).

正如你可能看到它的結(jié)構(gòu)非常復(fù)雜,在我看來,對于像DataPicker>這樣的嵌套組件中的每個變化都實(shí)現(xiàn)回調(diào)方法的管道線是不對的.資訊盒&GT網(wǎng)格和GT;頁面&GT還有別的.

解決方法:

你完全正確的做法是更改DatePicker組件中的日期不應(yīng)該觸發(fā)Flux操作. Flux動作用于改變應(yīng)用程序狀態(tài),并且?guī)缀鯊牟徊榭匆晥D狀態(tài)意味著“輸入框X包含值Z”或“列表Y被折疊”的狀態(tài).

您正在創(chuàng)建可重用的組件(如Grid等)非常棒,它可以幫助您使應(yīng)用程序更易于維護(hù).

處理問題的方法是將組件從頂層傳遞到底層.這可以通過子組件或簡單的道具來完成.

假設(shè)你有一個頁面,它顯示了兩個網(wǎng)格,一個網(wǎng)格 – 比方說 – 會議約會和一個帶有待辦事項(xiàng)的網(wǎng)格.現(xiàn)在,頁面本身在層次結(jié)構(gòu)中太高,無法知道何時觸發(fā)操作,并且Grid和InfoBox過于籠統(tǒng),無法知道要觸發(fā)的操作.你可以像你說的那樣使用回調(diào),但這可能有點(diǎn)過于局限.

所以你有一個頁面,你有一系列約會和一系列待辦事項(xiàng).要渲染并連接它,你可能會有這樣的事情：

var TodoActions = {
  markAsComplete: function (todo) {
    alert('Completed: '   todo.text);
  }
};

var InfoBox = React.createClass({
  render: function() {
    return (
      <div className="infobox">
        {React.createElement(this.props.component, this.props)}
      </div>
    );
  }
});

var Grid = React.createClass({
  render: function() {
    var that = this;
    return (
      <div className="grid">
        {this.props.items.map(function (item) {
          return <InfoBox component={that.props.component} item={item} />;
        })}
      </div>
    );
  }
});

var Todo = React.createClass({
  render: function() {
    var that = this;
    return (
      <div>
        Todo: {this.props.item.text}
        <button onClick={function () { TodoActions.markAsComplete(that.props.item); }}>Mark as complete</button>
      </div>
    );
  }
});

var MyPage = React.createClass({
  getInitialState: function () {
    return {
      todos: [{text: 'A todo'}]
    };
  },
  render: function() {
    return (
      <Grid items={this.state.todos} component={Todo} />
    );
  }
});

React.render(<MyPage />, document.getElementById('app'));

如您所見,Grid和InfoBox都知道的很少,除了一些數(shù)據(jù)傳遞給它們,并且它們應(yīng)該在底部呈現(xiàn)一個知道如何觸發(fā)動作的組件. InfoBox還將其所有道具傳遞給Todo,這為Todo提供了傳遞給InfoBox的待辦事項(xiàng)對象.

所以這是處理這些事情的一種方法,但它仍然意味著你在組件之間傳播道具.在某些情況下,如果您有深度嵌套,那么傳播會變得乏味,并且很容易忘記添加它會使組件進(jìn)一步向下破壞.對于這些情況,我建議您查看React中的上下文,這非常棒.以下是對上下文的一個很好的介紹：https://www./2014/11/15/introduction-to-contexts-in-react-js.html

編輯

更新回復(fù)您的評論.為了在示例中概括Todo以便它不知道顯式調(diào)用哪個動作,您可以將其包裝在一個知道的新組件中.

像這樣的東西：

var Todo = React.createClass({
  render: function() {
    var that = this;
    return (
      <div>
        Todo: {this.props.item.text}
        <button onClick={function () { this.props.onCompleted(that.props.item); }}>Mark as complete</button>
      </div>
    );
  }
});

var AppointmentTodo = React.createClass({
  render: function() {
    return <Todo {...this.props} onCompleted={function (todo) { TodoActions.markAsComplete(todo); }} />;
  }
});

var MyPage = React.createClass({
  getInitialState: function () {
    return {
      todos: [{text: 'A todo'}]
    };
  },
  render: function() {
    return (
      <Grid items={this.state.todos} component={AppointmentTodo} />
    );
  }
});

因此,它沒有讓MyPage將Todo傳遞給Grid,而是傳遞了AppointmentTodo,它只作為知道特定操作的包裝器組件,釋放Todo只關(guān)心渲染它.這是React中非常常見的模式,您可以在其中將組件委托給另一個組件,并將props傳遞給它.