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

【问题标题】：Passing a function to React component in props在 props 中将函数传递给 React 组件
【发布时间】：2019-08-15 20:19:00
【问题描述】：

我检查了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？

【问题讨论】：

你能验证toggleDarkTheme真的触发了什么吗？只需注释掉该函数中的当前逻辑并执行 alert 或 console.log()
@ChristopherNgo 是的，它在子组件中触发toggleDarkTheme 函数
能否添加代码沙箱链接：codesandbox.io/s/new

标签： javascript reactjs next.js

【解决方案1】：

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

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

【讨论】：

终于让它工作了，app.js 和 Layout 之间还有一个组件没有传递 props。发现它调试道具。不管怎样，我听从了你的建议，现在逻辑被简化了，只有父母持有状态

【解决方案2】：

我怀疑是因为语法。

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

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

【讨论】：