React/Redux，正在重新加载路由中的组件

Question

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

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

我的路线是：

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

当我在任意行中单击 "Edit" 时，会出现模态对话框：

如果我点击第一个 "Edit" link 一切正常。但是如果我在对话框中按下 "Close" 按钮并尝试再次单击任何 "Edit" link，模式对话框不会启动，我猜这是因为组件已经 "up".

对话的hide/show行为由AppoModal组件中的this.state.showModal值控制：

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

所以我不知道如何 "reload" 或 "re run" 组件。每次单击 "Edit" link 时，我可以运行发送（操作）吗？我听说过 "static method"，但我是 React 的新手，不知道那是否是路径。

谢谢！

Answer 1

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

由于您的模式随着路线更改而打开，因此它也应该随着路线更改而关闭。

Answer 2

您可以采取不同的方法，同时避免路线变更。由于您使用的是 redux，因此您可能有一个全局状态，它可以包含一个模态名称作为常量，或者可能包含对组件的引用。

现在您可以拥有一个模态组件，它会根据全局状态变化呈现组件，您可以在根组件的某处调用此组件。

所以你的减速器看起来像

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

React/Redux，正在重新加载路由中的组件

React/Redux, Reloading a component in route

javascript

reactjs

redux