reactjs - React：将函数作为道具发送

Question

我有一个主 App 组件，它有 2 个状态变量和 2 个按钮单击处理函数，这些单击处理程序更新 App 的状态。App 内还有一个 PageLoader 组件，我想发送到 PageLoader（App 的函数和状态变量）。我想用 PageLoader 中的 2 个按钮触发 App 的功能。

应用程序.js

import React from 'react';
import PageLoader from './Components/PageLoader';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loadComponent1: false,
      loadComponent2: false
    }
  }
  handleButton1 = () => {
    this.setState(state => ({ loadComponent2: !state.loadComponent2 }));
  }
  handleButton2 = () => {
    this.setState(state => ({ loadComponent2: !state.loadComponent2 }));
  }
  render() { 
    return ( 
      <PageLoader 
        loadComponent1={this.state.loadComponent1}
        loadComponent2={this.state.loadComponent2}
        handleButton1={this.handleButton1}
        handleButton2={this.handleButton2}
      />
    );
  }
}

export default App;

PageLoader.js

import React from 'react';
import Component1 from './Component1';
import Component2 from './Component2';

export default function PageLoader() {

    this.props.handleButton1 = this.props.handleButton1.bind(this);
    this.props.handleButton2 = this.props.handleButton2.bind(this);

    const Component1Button = ({ onClick }) => (
        <button onClick={onClick} type="button">Load Component 1</button>
    )
    const Component2Button = ({ onClick }) => (
        <button onClick={onClick} type="button">Load Component 2</button>
    )
    const Page = ({ loadComponent1, loadComponent2 }) => 
    loadComponent1 ? <Component1/> : loadComponent2 ? <Component2/> : <div>NOT 
    LOADED</div>;

    return(
        <main>
            <Page/>
            <Component1Button onClick={this.props.handleButton1}/>
            <Component2Button onClick={this.props.handleButton2}/>
        </main>
    )  
}
THANK YOU

标签： reactjs

Answer 1

更改 PageLoader 如下

export default function PageLoader(props) {
  const handleButton1 = props.handleButton1;
  const handleButton2 = props.handleButton2;

而page和ComponentButtons应该是这样的

 <main>
      <Page
        loadComponent1={props.loadComponent1}
        loadComponent2={props.loadComponent2}
      />
      <Component1Button onClick={handleButton1} />
      <Component2Button onClick={handleButton2} />
  </main>