React+Rails API：如何通过路由组件向子组件传递函数Props？

我完全懂你的烦恼——React Router的<Link>组件确实没法直接在state里传递函数，因为location.state只能存放可序列化的数据（比如对象、数组、字符串这些），函数是没法被序列化的，所以你之前的写法会报错。不过有几个实用的方案能帮你绕过这个限制，不用再被Router“卡脖子”：

方案一：用Context API共享函数和状态 #

Context API是React自带的状态共享方案，适合在不需要全局状态管理的场景下，让跨层级的组件直接共享数据和函数。

步骤1：创建TripContext #

新建一个TripContext.js文件：

import React from 'react';

// 创建Context，默认值可以设为空对象
const TripContext = React.createContext({});

export default TripContext;

步骤2：在Trips组件中提供Context #

把Trips组件的addTrip函数和trips状态放到Context的Provider里，这样所有子组件（包括通过Router跳转的NewTrip）都能访问到：

import TripContext from './TripContext';

class Trips extends React.Component {
  constructor(props) {
    super(props);
    this.state = { trips: [] }
    this.addTrip = this.addTrip.bind(this);
  }

  addTrip(trip) {
    // 这里建议用不可变更新的方式，避免直接修改原数组
    this.setState(prevState => ({
      trips: [...prevState.trips, trip]
    }));
  }

  render(){
    const { trips } = this.state;
    return(
      <TripContext.Provider value={{ trips, addTrip: this.addTrip }}>
        {/* 你的其他Trips组件内容 */}
        <Link to="/trip" className="btn custom-button">
          Create New Trip
        </Link>
      </TripContext.Provider>
    )
  }
}

步骤3：在NewTrip组件中消费Context #

现在NewTrip可以直接从Context里拿到addTrip函数，不用通过Router传递：

import TripContext from './TripContext';

class NewTrip extends React.Component {
  // 假设你有一个提交表单的方法
  handleSubmit = async (formData) => {
    // 先调用Rails API保存新Trip
    const response = await fetch('/api/trips', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData)
    });
    const newTrip = await response.json();
    
    // 调用Context里的addTrip更新状态
    this.context.addTrip(newTrip);
    // 跳回Trips页面
    this.props.history.push('/trips');
  }

  // 声明使用TripContext
  static contextType = TripContext;

  render() {
    return (
      {/* 你的NewTrip表单内容 */}
    )
  }
}

方案二：把状态提升到Router的父组件 #

如果你的应用逻辑比较简单，可以把trips状态和addTrip函数提升到Router所在的父组件（比如App.js），然后通过Route的render方法传递给Trips和NewTrip组件。这样两个组件共享同一个状态源，不用在Trips里传递函数。

步骤1：在App.js中维护状态 #

import React from 'react';
import AppRouter from './routes/Index';

class App extends React.Component {
  state = { trips: [] };

  addTrip = (trip) => {
    this.setState(prevState => ({
      trips: [...prevState.trips, trip]
    }));
  }

  render() {
    return <AppRouter trips={this.state.trips} addTrip={this.addTrip} />;
  }
}

export default App;

步骤2：修改Router组件传递Props #

更新routes/Index.js，把父组件的trips和addTrip传递给对应的Route组件：

export default ({ trips, addTrip }) => (
  <Router>
    <Switch>
      <Route path="/" exact component={Home} />
      {/* 给Trips组件传递状态和函数 */}
      <Route path="/trips" exact render={() => <Trips trips={trips} addTrip={addTrip} />} />
      {/* 给NewTrip组件传递路由Props和addTrip函数 */}
      <Route path="/trip" render={(routeProps) => <NewTrip {...routeProps} addTrip={addTrip} />}/>
      <Route path="/trip/:id" exact component={Trip} />
      <Route path="/trip/:id/cost" exact component={NewCost} />
      <Route path="/trip/:id/edit" exact component={EditTrip} />
    </Switch>
  </Router>
);

步骤3：调整Trips组件 #

现在Trips组件不用自己维护state了，直接使用父组件传递的props：

class Trips extends React.Component {
  render(){
    const { trips } = this.props;
    return(
      <Link to="/trip" className="btn custom-button">
        Create New Trip
      </Link>
    )
  }
}

为什么Link不能传递函数？ #

补充一下背后的原因：React Router的location.state会被序列化存储（比如在浏览器刷新时，state会被存在sessionStorage里），而函数属于不可序列化的对象，无法被转换成字符串存储，所以<Link>的state里不能放函数——这是设计上的限制，不是bug。

这两个方案里，Context API更适合组件层级较深或者不想提升状态的场景，状态提升则适合简单的小型应用。如果你的应用后续会变得复杂，也可以考虑引入Redux或者Zustand这类状态管理库，让状态和函数的共享更顺畅。

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