将一个组件从第三个组件添加到另一个组件

Question

我正在做一个ReactJS应用程序，我有3个组件，Sidebar, Dashboard和Widget。

Sidebar, Dashboard在主App容器内呈现

...
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哪些选项?

谢谢

Answer 1

当我遇到这种情况时，我经常遵循"数据向下，行动向上"的方法。(这是一种烬的名字，但我发现它与Flux相当匹配。)我要做的是从你的侧边栏发送一个动作到你的应用程序，并告诉它添加另一个小部件到仪表板。例如，像这样的操作可能会起作用。

在侧边栏中，将点击的小部件传递给App组件传入的回调:

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

然后在你的app组件中，将该小部件添加到小部件列表中，并将其传递给Dashboard组件:

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>
        );
    }
};

现在，在您的Dashboard组件中，您可以使用this.props.children来获取您需要呈现的小部件列表。

你可能想要调整一些东西，比如如何将动作发送到App组件，如何创建小部件，或者如何将它们传递给Dashboard组件，但这应该给你一个想法。