时间戳

首页 > 解决方案 > 基于上下文动态加载组件的侧面板

reactjs - 基于上下文动态加载组件的侧面板

问题描述

使用反应：如何根据操作类型呈现具有不同组件的侧面板组件。举一个具体的例子：

在主页上，我有一个包含一些行的表格。每行可能属于不同的“类型”（第 1 行可能属于 A 类型，第 2 行可能属于 B 类型。

当我单击 A 类型的行时，我想渲染与 A 类型行相关的组件，以及 B 类型行的不同组件。

您几乎可以将面板定义为“小部件”区域，我可以在其中根据不同的上下文加载不同的组件，或者我在该区域之外执行的操作。

以下是我正在尝试做的事情。

例子

标签： reactjsreact-component

解决方案

这可以通过更改存储在所选行类型的状态上的数据来完成。

例如：

state = {
  currently_selected_type : ""
}

在你的渲染函数中，我们可以有这样的东西：

render(){
  let SidePanelComponent = null;
  if(this.state.currently_selected_type === "A"){
    SidePanelComponent = (<div>A</div>);
  }
  else if(this.state.currently_selected_type === "B"){
    SidePanelComponent = (<div>B</div>);
  }

  return (
    <div>
      <Table
        onClick={
          // this type will be passed from the inside Table when rows are clicked based on the row type
          (type) => this.setState({currently_selected_type : type})
        }
       />
      {SidePanelComponent}
    </div>
  );
}

在Table组件内部，您将呈现不同类型的行，因此根据单击的行，只需将类型发送到传递的onClick函数。

Table渲染函数可以如下，例如：

render(){
  return (
  ...
   <tr onClick={this.props.onClick("A")}>Row Type A</tr>
   <tr onClick={this.props.onClick("B")}>Row Type B</tr>
  ...
  );
}

推荐阅读