在React中管理对话框的最佳方式

// 对话框组件
const Dialog = ({ title, content, onClose }) => {
  return (
    <div className="dialog">
      <h2>{title}</h2>
      <p>{content}</p>
      <button onClick={onClose}>关闭</button>
    </div>
  );
};

// Redux状态管理
const initialState = {
  showDialog: false,
  dialogTitle: '',
  dialogContent: ''
};

const dialogReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SHOW_DIALOG':
      return {
        ...state,
        showDialog: true,
        dialogTitle: action.payload.title,
        dialogContent: action.payload.content
      };
    case 'HIDE_DIALOG':
      return {
        ...state,
        showDialog: false,
        dialogTitle: '',
        dialogContent: ''
      };
    default:
      return state;
  }
};

// Redux store
const store = createStore(dialogReducer);

// 应用程序组件
const App = () => {
  const showDialog = useSelector(state => state.showDialog);
  const dialogTitle = useSelector(state => state.dialogTitle);
  const dialogContent = useSelector(state => state.dialogContent);
  const dispatch = useDispatch();

  const handleOpenDialog = () => {
    dispatch({
      type: 'SHOW_DIALOG',
      payload: {
        title: '对话框标题',
        content: '对话框内容'
      }
    });
  };

  const handleCloseDialog = () => {
    dispatch({ type: 'HIDE_DIALOG' });
  };

  return (
    <div>
      <button onClick={handleOpenDialog}>打开对话框</button>
      {showDialog && (
        <Dialog
          title={dialogTitle}
          content={dialogContent}
          onClose={handleCloseDialog}
        />
      )}
    </div>
  );
};

// 渲染应用程序
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);