Question

我同时检查了other questions和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

您不应该在父级和子级中都使用状态，这会使您的逻辑变得复杂。您可以将状态放置在父级中，并将修饰符函数作为prop传递给子级（子级变成哑组件）。
无需绑定修饰符功能。
父组件可以成为函数而不是类。

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

Answer 2

我怀疑是因为语法。

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

在子组件中更改此行应该可以解决问题。 Cant确实知道，没有一些最少的代码即可测试运行

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

2 个答案: