React stateless component props id绑定onClick及父子组件id回传问题

Hey there! Let's tackle your React questions step by step, and fix that tricky binding issue you've been dealing with.

Binding a prop's id to an onClick handler in a stateless (functional) component is straightforward—here are two common, clean approaches:

• Use an arrow function with a dedicated handler
  This keeps your logic organized and lets you easily reuse the handler if needed:

  const StatelessComponent = ({ id }) => {
    const handleClick = (itemId) => {
      console.log("Clicked item ID:", itemId);
      // Add your custom click logic here
    };
  
    return (
      <button onClick={() => handleClick(id)}>
        Click Item {id}
      </button>
    );
  };
  

• Simplify with inline arrow function (for quick actions)
  If your click logic is simple (like logging the ID), you can skip defining a separate handler:

  const StatelessComponent = ({ id }) => {
    return (
      <button onClick={() => console.log("Clicked ID:", id)}>
        Click Item {id}
      </button>
    );
  };
  

Absolutely you can do this! The issue with your bind attempts was likely a small misstep in how you applied it. Let's walk through the most reliable methods:

Method 1: Arrow function in the child component #

This is the most intuitive approach for most cases. The child uses an arrow function to pass the id directly to the parent's handler:

// Parent Class Component
class ParentComponent extends React.Component {
  onClickHandler = (itemId) => {
    console.log("Received ID from child:", itemId);
    // Add your parent-side logic here (e.g., update state, call APIs)
  };

  render() {
    const items = [101, 102, 103]; // Example data set
    return (
      <div>
        {items.map(item => (
          <StatelessChild
            key={item}
            id={item}
            onItemClick={this.onClickHandler}
          />
        ))}
      </div>
    );
  }
}

// Stateless Child Component
const StatelessChild = ({ id, onItemClick }) => {
  return (
    <button onClick={() => onItemClick(id)}>
      Select Item {id}
    </button>
  );
};

Method 2: Bind the ID in the parent component #

If you prefer using bind, do it in the parent's render method (when mapping over items) to pre-attach the id to the handler:

// Parent Class Component
class ParentComponent extends React.Component {
  onClickHandler(itemId) {
    console.log("Received ID from child:", itemId);
  }

  render() {
    const items = [101, 102, 103];
    return (
      <div>
        {items.map(item => (
          <StatelessChild
            key={item}
            onClick={this.onClickHandler.bind(this, item)}
          />
        ))}
      </div>
    );
  }
}

// Stateless Child Component
const StatelessChild = ({ onClick }) => {
  // No need to pass id here—bind already attached it!
  return <button onClick={onClick}>Select Item</button>;
};

Note: Avoid using bind directly in the child's onClick prop (like onClick={onClick.bind(this, id)})—this creates a new function on every render, which can trigger unnecessary re-renders.

Method 3: Curried handler (for complex logic) #

If your parent handler needs additional context, a curried function works perfectly:

// Parent Class Component
class ParentComponent extends React.Component {
  onClickHandler = (itemId) => () => {
    console.log("Received ID from child:", itemId);
    // Add logic that depends on itemId or other parent state here
  };

  render() {
    const items = [101, 102, 103];
    return (
      <div>
        {items.map(item => (
          <StatelessChild
            key={item}
            onClick={this.onClickHandler(item)}
          />
        ))}
      </div>
    );
  }
}

// Stateless Child Component
const StatelessChild = ({ onClick }) => {
  return <button onClick={onClick}>Select Item</button>;
};

Quick Troubleshooting Tip #

If your bind attempts failed before, double-check these two common mistakes:

• Did you pass the id as the first argument to bind? The order of arguments matters!
• Were you accidentally invoking the handler immediately (like onClick={onClickHandler(id)} instead of wrapping it in an arrow function or bind)? That runs the function on render, not when clicked.

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