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 组件 props 不是 App 道具，因此您可以将代码更改为使用App的道具，例如：

holdyDiv.fadeIn(3000).appendTo('#printData');

或者您可以使用解构：

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>
  );
};

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

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

1 个答案: