无法通过 <Route /> 将函数传递给组件

Question

setErm 是一个函数，在 Erm 组件中未定义。虽然 App 组件接收到它。如果我传递任何类似 something='foo' 的东西，ERM 组件会得到它，但不会 setErm={props.setErm}

const App = props => {
  console.log("props in App", props);
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route
            path="/erm"
            render={props => <Erm {...props} setErm={props.setErm} />}
          />
          <Route exact path="/:weekId" component={Week} />
          <Route exact path="/:weekId/:dayId" component={Day} />
        </Switch>
      </div>
    </Router>
  );
};

Answer 1

您的代码中的问题是，在您的 Erm 组件 props 中，这里指的是 Route component props 而不是 App props 所以你可以改变你的代码来使用 App 的 props 像这样：

const App = props => {
  console.log('props in App', props);
  const appProps = props; // add this line to refer to App props
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route
            path="/erm"
            render={props => <Erm {...props} setErm={appProps.setErm} />}
          />
          <Route exact path="/:weekId" component={Week} />
          <Route exact path="/:weekId/:dayId" component={Day} />
        </Switch>
      </div>
    </Router>
  );
};

或者你可以使用解构：

const App = ({ setErm }) => {
  console.log('props in App', props);
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route
            path="/erm"
            render={props => <Erm {...props} setErm={setErm} />}
          />
          <Route exact path="/:weekId" component={Week} />
          <Route exact path="/:weekId/:dayId" component={Day} />
        </Switch>
      </div>
    </Router>
  );
};

如您所见，您现在可以使用 App 组件的顶级属性

无法通过 <Route /> 将函数传递给组件

Can't pass a function to a component via <Route />

javascript

reactjs

react-router-v4