React子组件向父组件传递参数问题求助（含待修复代码）

我来帮你搞定这个参数传递的问题！你的代码里有两个关键问题导致id传不过去，咱们一步步来修复：

问题分析 #

• React事件命名错误：HTML原生元素（比如div）的点击事件在React里需要用驼峰命名的onClick，而不是你写的click，这个错误会导致点击事件根本不会被触发。
• 参数传递断层：在ChildComponent里，你包装了click方法但没有传递id参数，导致父组件的suggestionClick方法拿到的id是undefined。

修复后的完整代码 #

class Parent extends React.Component {
  suggestionClick(id) {
    console.log(this.props, id); // 现在能正常输出 {props Object} 和 "1" 啦
  }
  render(){
    return ( 
      <ChildComponent click={this.suggestionClick.bind(this)} />
    );
  }
}
const ChildComponent = ({ click }) => (
  // 直接把父组件的click方法传给子组件，让子组件自己传递id参数
  <SubChildComponent id="1" click={click} />
);
const SubChildComponent = ({ click, id }) => (
  // 改成React正确的onClick事件，调用时传入id
  <div className="subsubcomponent" onClick={() => click(id)}>点击我测试</div>
);
ReactDOM.render(
  <Parent />,
  document.getElementById('app')
);

关键修改点说明 #

1. 修正事件绑定：把SubChildComponent中div的click属性改成onClick，这是React事件系统的标准写法，确保点击能触发回调。
2. 补全参数传递：ChildComponent不再额外包装click方法，直接把父组件的回调传给SubChildComponent，让SubChildComponent在点击时把自身的id作为参数传入回调。
3. 添加可点击内容：给div加了文本“点击我测试”，避免空div难以点击测试。

另外，你也可以选择在ChildComponent层就绑定好id参数，写法如下：

const ChildComponent = ({ click }) => (
  // 提前把id绑定到click方法里，SubChildComponent直接调用即可
  <SubChildComponent onClick={() => click("1")} />
);
const SubChildComponent = ({ onClick }) => (
  <div className="subsubcomponent" onClick={onClick}>点击我测试</div>
);

这种写法适合id在ChildComponent里就确定的场景，同样能实现参数传递。

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