javascript - 将函数 prop 传递给子组件(通过 Link 和 Route 组件)

Question

我正在使用带有 Rails API 后端的纯 React。

我正在从 API 获取数据并将状态存储在我的 Trips 组件中。我有一个链接组件，我可以将状态传递给我的 NewTrip 组件，但是 <Link>不允许我传递函数。

我能够通过位于 './routes/Index' 的 Route 组件上的渲染方法将函数传递给 NewPage。

但是如何从 Trips 组件传递函数？作为 Prop 传递给组件时要容易得多，路由器似乎在路上!

'路由/Index.js'

export default (
  <Router>
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/trips" exact component={Trips} />
      <Route path="/trip" render={(routeProps)=><NewTrip {...routeProps} />}/>
      <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>
);

'组件/行程'

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

    this.addTrip = this.addTrip.bind(this);
  }

  addTrip(trip) {
    const {trips} = this.state;
    trips.push(trip);
    this.setState({ trips: trips});
  }

  render(){
    return(
      <Link
        to={{
          pathname: "/trip",
          state: {trips: trips, onAddTrip={this.addTrip}} // not allowed,
// but I want to pass this function to the 
// Component which is rendered by the Route in Index.js
        }}
        className="btn custom-button">
          Create New Trip
      </Link>
    )
  }
}

Answer 1

我觉得你应该lift state up的Trips组件并将其放在您的“routes/Index.js”中。 (它现在需要是一个组件，而不仅仅是导出)。

'路由/Index.js'

export default class Routes extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      trips: []
    }

    this.addTrip = this.addTrip.bind(this);
  }

  addTrip(trip) {
    const {trips} = this.state;
    trips.push(trip);
    this.setState({ trips: trips});
  }

  render() {
    return (
      <Router>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/trips" exact component={Trips} />
          <Route path="/trip" render={(routeProps)=>
            <NewTrip addTrip={this.addTrip} trips={this.state.trips} {...routeProps} />
          }/>
          <Route path="/trip/:id" exact render={(routeProps)=>
            <Trip addTrip={this.addTrip} trips={this.state.trips} {...routeProps} />
          }/>
          <Route path="/trip/:id/cost" exact component={NewCost} />
          <Route path="/trip/:id/edit" exact component={EditTrip} />
        </Switch>
      </Router>
    );
  }
}

'组件/行程'

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

在 App 中将状态更高可能会更好组件，但您没有提供，所以必须这样做:)