从第三个组件添加组件到其他组件

问题描述：

我正在研究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点击项目时的名单？

感谢

答

当我遇到这种情况我常常遵循“数据下降，行动起来”的办法。（这是一种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获得您需要渲染小部件的列表。

您可能需要调整一些内容，例如如何将操作发送给应用程序组件，如何创建窗口小部件或如何将它们传递到仪表板组件，但这应该会给您提供这个想法。

谢谢。这就说得通了。我试试看，看看我到底在哪里。 – macsig

它工作得很好。但现在我怎么告诉从应用程序到边栏再次显示小部件被删除时李。我继续前进，并在控件显示板上隐藏了li。谢谢你的帮助。 – macsig

如果您需要将该信息发回侧边栏，则可能无法正确构建您的应用。如果您的边栏和仪表板都需要访问这些小部件，但它们是彼此的兄弟，则这些小部件不应包含在一个组件或另一个组件中。小部件应该处于更高的级别，以便它们可以被这两个组件访问。这可能是App组件，也可能是Flux-ish商店。无论哪种方式，您都可能想重新考虑小部件所在的位置。（试图按照你现在的方式来做，可能会导致循环依赖问题。） – GJK

从第三个组件添加组件到其他组件

相关推荐