将函数传递给 props 中的 React 组件

Question

我检查了 and also docs 但我无法让它工作。我想将一个处理程序函数传递给其道具中的子组件以在主题之间切换。

我在父组件和设置新状态的处理程序中定义了一个状态。我试过带参数和不带参数。

这是父

class MyApp extends App {

  constructor(props) {
    super(props);
    this.state = {
      colorScheme: "light"
    };
    this.handleColorScheme = this.handleColorScheme.bind(this);
  }

  handleColorScheme = scheme => {
    this.setState({ colorScheme: scheme });
  };

  render() {
    const { Component, pageProps } = this.props;

    const props = {
      ...pageProps,
      schemeHandler: this.handleColorScheme
    };
    return (
      <Container>
         <ThemeProvider
            theme={this.state.colorScheme === "light" ? theme : themeDark}
          >
            <Component {...props} />
          </ThemeProvider>
      </Container>
    );
  }
}

export default MyApp;

这是子组件

export default function Layout(props) {
  const [theme, setTheme] = useState({
    palette: {
      type: "light"
    }
  });

  const toggleDarkTheme = () => {
    let newPaletteType = theme.palette.type === "light" ? "dark" : "light";    
    props.schemeHandler(newPaletteType);
  };

  return (
   <div>
      <CssBaseline />
      <div className={classes.root}>
        <AppBar
          position="absolute"
          color={"default"}
          className={classes.appBar}
        >
          <Toolbar>
              <IconButton onClick={toggleDarkTheme}>
                <Dark />
              </IconButton>            
          </Toolbar>
        </AppBar>
        <main className={classes.content}>          
          {props.children}
        </main>
      </div>
    </div>
  );
}

当我点击按钮时，它说 toggleDarkTheme 不是函数。使用开发工具进行调试，我发现我永远无法访问父函数。这个函数如何在props中传递？

Answer 1

我怀疑是语法问题。

<IconButton onClick={() => toggleDarkTheme() }>

更改子组件中的这一行应该可以解决问题。如果没有一些最少的代码来测试就无法真正知道运行

Answer 2

你不应该同时在parent和children中使用状态，这会让你的逻辑变得复杂。您可以将状态放在父级中，并将修改器函数作为道具传递给子级（子级成为哑组件）。
无需绑定修饰符函数
父组件可以成为函数而不是 class。

示例： https://codesandbox.io/embed/passing-react-func-as-props-kf8lr

将函数传递给 props 中的 React 组件

Passing a function to React component in props

javascript

reactjs

next.js