如何在React的map函数中添加组件？头部按钮绑定Confirm组件

Let's break down what's going wrong with your current code and fix it step by step:

First, the Issues in Your Current Code #

1. Missing return in the if block: Your map function doesn't return anything when action.name === 4—so neither the Confirm nor the corresponding ActionButton will render properly.
2. Uncontrolled Confirm visibility: If you render the Confirm directly inside the map, it will be visible immediately instead of only when the button is clicked. You need a state to control when it shows up.

Step-by-Step Solution #

1. Add State to Control Confirm Visibility

First, import useState from React and add a state variable to manage whether the Confirm component is visible:

import { useState } from 'react';

// Inside your component
const [isConfirmOpen, setIsConfirmOpen] = useState(false);

2. Modify the Button Rendering Logic

Update your renderButtons function to return the ActionButton, and bind a click handler to it that opens the Confirm when action.name === 4. Make sure every branch of the map returns a component:

const renderButtons = (actions: Interfaces.DeclarationAction[]) => {
  return actions.map((action, i) => {
    if (action.name === 4) {
      // Bind click to open the Confirm
      return (
        <ActionButton
          key={i}
          action={action}
          onClick={() => setIsConfirmOpen(true)}
        />
      );
    }
    // Render other buttons normally
    return <ActionButton key={i} action={action} onClick={/* Your existing click logic */} />;
  });
};

3. Render the Confirm Component with State Control

Place the Confirm component in your main component JSX (not inside the map), and use the state to toggle its visibility. Don't forget to add a handler to close it when the user cancels:

return (
  <div className="your-app-container">
    {/* Render your header buttons */}
    <header>{renderButtons(yourActionList)}</header>

    {/* Render Confirm only when isConfirmOpen is true */}
    {isConfirmOpen && (
      <Confirm
        name={modalName()}
        content="Are you sure?"
        onConfirm={() => {
          checkingFinish();
          setIsConfirmOpen(false); // Close after confirmation
        }}
        onCancel={() => setIsConfirmOpen(false)} // Close when user cancels
      />
    )}
  </div>
);

Key Takeaways #

• Always return elements from map—otherwise, they won't be included in the rendered output.
• Use React state to control the visibility of modal components like Confirm. This ensures you can show/hide them in response to user actions (like button clicks).
• Avoid rendering modals inside list loops unless each list item needs its own independent modal—for a single shared Confirm, render it once in the parent component and toggle it with state.

内容的提问来源于stack exchange，提问作者tesicg