反应，和/终极版，在路线

问题描述：

重装组件我行的一个基本的CRUD屏幕，每行的典型名单，像往常一样与链接：反应，和/终极版，在路线

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

我的路线是：

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

当我在任何行中点击“编辑”出现在一个模态对话：

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

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

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

所以我不知道如何“刷新”或“重新运行“组件。我每次点击“编辑”链接时是否可以运行调度（行动）？我听说过一种“静态方法”，但对于React来说，我太新手了，知道这是否是路径。

Thx！

答

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

由于您的模态打开时会发生路线变化，因此它还应该随路线变化而关闭。

男人，你是好人， browserHistory.push（'/ appointmentments'）}>关闭取得了诀窍。 Thx David！ – aarkerio

答

您可以采取不同的方法，避免路线变更。由于您使用的是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);

反应，和/终极版，在路线

相关推荐