将 function 道具传递给子组件（通过链接和路由组件）

Question

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

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

我可以通过位于“./routes/Index”的 Route 组件上的 render 方法将函数传递给 NewPage。

但是如何从我的 Trips 组件中传递 function 呢？ 作为 props 传递给组件时要容易得多，Router 似乎妨碍了！

'路线/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

我认为您应该将 state 提升到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组件中将 state 放在更高的位置可能会更好，但您没有提供，所以必须这样做:)

Answer 2

您可以在反应路由器链接中使用state传递函数。

    <Link
        to={{
          pathname: "/trip",
          state: {trips: trips, onAddTrip: this.addTrip}
        }}
        className="btn custom-button">
          Create New Trip
    </Link>

然后在/trip中，您检索并使用 function，如下所示：

this.props.location.state.addTrip();