React中如何向子页面组件传递props？以onToggleBooking为例

看起来你已经在layout.js的Template组件里定义好了handleToggleBooking方法，要把它作为onToggleBooking props传给子页面的组件其实很简单，核心就是正确处理children的调用逻辑——因为你这里用的是{children()}，说明children是一个函数类型的子组件（也就是Render Props模式），只需要在调用它的时候把需要的props传进去就行。

第一步：修改Template组件的render方法 #

把你原来的{children()}改成传递props的形式，具体代码如下：

class Template extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isBookingVisible: false,
    };
    this.handleToggleBooking = this.handleToggleBooking.bind(this);
  }

  handleToggleBooking() {
    this.setState({ isBookingVisible: !this.state.isBookingVisible });
  }

  render() {
    // 准备要传递给子组件的props集合
    const childProps = {
      onToggleBooking: this.handleToggleBooking,
      // 如果你需要把预订面板的显示状态也传给子页面，也可以在这里添加
      isBookingVisible: this.state.isBookingVisible
    };

    // 调用children函数时传入准备好的props
    return (
      <div className="layout-wrapper">
        {this.props.children(childProps)}
      </div>
    );
  }
}

第二步：在子页面组件中接收并使用props #

子页面的组件可以通过参数直接接收onToggleBooking，然后绑定到交互元素上使用，比如：

// 子页面示例：函数组件写法
const HotelDetailPage = ({ onToggleBooking }) => {
  return (
    <div className="hotel-page">
      <h2>XX酒店详情</h2>
      {/* 点击按钮触发父组件的状态切换逻辑 */}
      <button onClick={onToggleBooking}>打开/关闭预订面板</button>
    </div>
  );
};

// 子页面示例：类组件写法
class FlightBookingPage extends React.Component {
  render() {
    return (
      <div className="flight-page">
        <h2>航班预订</h2>
        <button onClick={this.props.onToggleBooking}>切换预订弹窗</button>
      </div>
    );
  }
}

补充说明 #

这种方式属于React中的Render Props模式，它允许父组件（这里的Template布局组件）向任意子页面组件共享状态或方法，非常适合页面布局与业务页面分离的场景，能有效复用通用逻辑。

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