React / Redux，重新加载路径中的组件

Question

我在基本CRUD屏幕中有一个典型的行列表，每行都像往常一样链接：

<Link to={"/appointment/"+appointment.id+"/"}>Edit</Link>

我的路线是：

<Route path="/appointment/:id" component={AppoModal} />

当我点击任何一行中的“编辑”时，会出现一个模态对话框：

如果我点击第一个“编辑”链接，一切正常。但是，如果我按下对话框中的“关闭”按钮并尝试再次单击任何“编辑”链接，则模式对话框不会启动，我想这种情况正在发生，因为组件已经“启动”。

对话的隐藏/显示行为由AppoModal组件中的 this.state.showModal 值控制：

 constructor(props) {
    super(props);
    this.state = { showModal: true };
 }  

所以我不知道如何“重新加载”或“重新运行”该组件。每次点击“编辑”链接时，我都可以运行调度（操作）吗？我听说过“静态方法”，但我对React来说太新手了，不知道那是不是路径。

THX！

Answer 1

出现问题是因为当您单击“关闭”时，您正在更改组件状态，但您并未更改应用程序状态。

由于您的模态会随路线更改而打开，因此它也应该以路线更改结束。

Answer 2

你可以采取不同的方法，避免路线一起改变。由于您使用的是redux，因此可以使用一个全局状态，该状态可以包含模式名称作为常量，也可以包含对Component的引用。

现在，您可以拥有一个模式组件，该组件将根据全局状态更改呈现组件，您可以在根组件中的某处调用此组件。

所以你的减速器看起来像

export function modalState(state=null, action) {
  if(action.payload.name == "CLOSE_MODAL") return null;
  else if([/*modal names*/].includes(action.payload.name) {
    return {modal: action.payload.name, .data: action.payload.data}
  } else return {...state}
}

你有一个像

这样的动作

export function openModal(name, data) {
  return {
    type: "MODAL_NAME",
    payload: { name, data }
}

export function closeModal() {
  return { type: "CLOSE_MODAL", payoad: null }
}

您的组件可能看起来像

const componentMaps = {
  [MODAL_1] : import MODAL_1 from "./modals/Modal_1.jsx"
}
cont Modal = React.createClass({
  render: function() {
    let Component = componentMaps[this.props.modal.name]
    if(Component) {
      return <Component {...this.props.modal.data}/>
    } else { 
      return null;
    }
  }
});

export connect(select)(Modal);