從第三個組件添加組件到其他組件

我正在研究ReactJS應用程序，其中有3個組件，Sidebar,Dashboard和Widget。從第三個組件添加組件到其他組件

Sidebar，Dashboard在主應用程序容器

... 
class App extends React.Component { 
    render() { 
    return (
     <div> 
     <Sidebar/> 
     <Dashboard/> 
     </div> 
    ); 
    } 
}; 

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

Sidebar內呈現包含項目的列表，並且當點擊其中的一個我要添加（追加）到Dashboard一個Widget組件。

的Dashboard成分基本上是空的

... 
class Dashboard extends React.Component { 
    render() { 
    return (
     <div id="dashboard" className="dashboard"> 
     </div> 
    ); 
    } 
};

而且Sidebar有項目

... 
addWidget (widget) { 
    // What does I do here? 
    } 

    render() { 
    return (
     <div className="sidebar"> 
     <nav className="nav"> 
      <ul> 
      {this.state.items.map((item) => (
       <li key={item.id}><span onClick={ this.addWidget.bind(this, item.name) }>{item.name}</span></li> 
      ))} 
      </ul> 
     </nav> 
     </div> 
    ); 
    } 
};

哪些選項我必須追加Widget點擊項目時的名單？

感謝

來源

2015-08-15 macsig

當我遇到這種情況我常常遵循「數據下降，行動起來」的辦法。（這是一種Ember的名字，但我發現它與Flux相當。）我要做的是從側邊欄向你的應用發送一個動作，並告訴它向儀表板添加另一個小部件。例如，像這樣的東西可能會起作用。

在側邊欄，通過插件點擊進入這是由應用組件傳遞迴調：

addWidget(widget) { 
    this.props.onWidgetAdded(widget); 
}

然後在你的應用程序組件，該小工具添加到小部件的列表，並把它傳遞給儀表板組件：

class App extends React.Component { 

    constructor(props) { 
     super(props); 

     this.state = { 
      widgets: [] 
     }; 
    } 

    onWidgetAdded(widget) { 
     // Perform some logic to get a component, then add it to the list 
     const component = ... 

     this.setState({ 
      widgets: this.state.widgets.concat([component]) 
     }); 
    } 

    render() { 
     return (
      <div> 
       <Sidebar onWidgetAdded={this.onWidgetAdded} /> 

       <Dashboard> 
        {this.state.widgets} 
       </Dashboard> 
      </div> 
     ); 
    } 
};

現在在你的儀表板組件，您可以用this.props.children獲得您需要渲染小部件的列表。

您可能需要調整一些內容，例如如何將操作發送給應用程序組件，如何創建窗口小部件或如何將它們傳遞到儀表板組件，但這應該會給您提供這個想法。

來源

2015-08-15 14:59:51 GJK

謝謝。這就說得通了。我試試看，看看我到底在哪裏。 – macsig

它工作得很好。但現在我怎麼告訴從應用程序到邊欄再次顯示小部件被刪除時李。我繼續前進，並在控件顯示板上隱藏了li。謝謝你的幫助。 – macsig

如果您需要將該信息發回側邊欄，則可能無法正確構建您的應用。如果您的邊欄和儀表板都需要訪問這些小部件，但它們是彼此的兄弟，則這些小部件不應包含在一個組件或另一個組件中。小部件應該處於更高的級別，以便它們可以被這兩個組件訪問。這可能是App組件，也可能是Flux-ish商店。無論哪種方式，您都可能想重新考慮小部件所在的位置。（試圖按照你現在的方式來做，可能會導致循環依賴問題。） – GJK

從第三個組件添加組件到其他組件

回答

相關問題