구성 요소의 상태를 부모 구성 요소에서 변경하는 동작을 전달하는 방법은 무엇입니까?

Question

모달 대화 상자를 구현하려고하는데 응용 프로그램에서 항목을 삭제할지 여부를 묻습니다.

const Options = item => (
    <OptionsMenu> 
     <MenuItem onClick={_ => { 
      console.log(`Deleting item ${JSON.stringify(item)}`) 
     }}> 
      <IconButton aria-label="Delete" color="accent"> 
       <DeleteIcon /> 
      </IconButton> 
      <Typography> 
       Eliminar 
      </Typography> 
     </MenuItem> 
     <DeleteDialog 
      item={item} 
     /> 
    </OptionsMenu> 
) 

그리고 내 대화 상자 구성 요소는 다음과 같습니다 :이 구성 요소를했습니다

const DeleteDialog = props => (
    <div> 
     <Button onClick={() => { 
     this.props.openDeleteDialog(this.props.item) 
     }}>Delete</Button> 
     <Dialog open={this.props.open} onRequestClose={this.props.cancelDeleteData}> 
     <DialogTitle>{"DELETE"}</DialogTitle> 
     <DialogContent> 
      <DialogContentText> 
      Are you sure you want to delete the item: {this.props.item.name} 
      </DialogContentText> 
     </DialogContent> 
     <DialogActions> 
      <Button onClick={this.props.cancelDeleteData} color="primary"> 
      Cancel 
      </Button> 
      <Button onClick={this.props.deleteData(this.props.item)} color="primary"> 
      Delete 
      </Button> 
     </DialogActions> 
     </Dialog> 
    </div> 
); 

const mapStateToProps = state => ({ 
open: state.item.delete.open, 
}) 

const mapDispatchToProps = dispatch => ({ 
...deleteDispatchesForScope(scopes.ITEM, dispatch) 
}) 

내가 원하는 것은에서 옵션 구성 요소에서 true로 개방 상태를 설정하는 openDeleteDialog의 조치를 파견하는 것입니다 나는 다른 컴포넌트에서 모달 대화 상자를 재사용하도록 허용 할 것입니다. 저는 이것을 위해 react-redux와 material-ui v1을 사용하고 있습니다. 더 재사용 가능한 컴포넌트를하기 위해

Answer 1

, 나는 OptionsMenu에서 DeleteDialog을 분리하고, 각 자녀에 필요한 소품을 아래로 전달하는 ParentComponent에 의존하는 것 :

<ParentComponent> 
    <OptionsMenu> 
    <MenuItem onClick={this.props.openDeleteDialog}>Eliminar</MenuItem> 
    </OptionsMenu> 
    <DeleteDialog 
    open={this.props.isDeleteDialogOpen} 
    item={this.props.item} 
    onDelete={this.props.deleteData} 
    /> 
</ParentComponent> 

을