Reactjs 反应：作为道具发送功能

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

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;

从“React”导入React；
从“./Components/PageLoader”导入页面加载器；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
loadComponent1:错误，
loadComponent2:错误
}
}
把手按钮1=（）=>{
this.setState（state=>（{loadComponent2:！state.loadComponent2}））；
}
把手按钮2=（）=>{
this.setState（state=>（{loadComponent2:！state.loadComponent2}））；
}
render（）{
报税表（
);
}
}
导出默认应用程序；

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

从“React”导入React；
从“/Component1”导入组件1；
从“/Component2”导入组件2；
导出默认函数PageLoader（）{
this.props.handleButton1=this.props.handleButton1.bind（this）；
this.props.handleButton2=this.props.handleButton2.bind（this）；
常量组件1按钮=（{onClick}）=>(
负载组件1
)
常量组件2按钮=（{onClick}）=>(
加载组件2
)
常量页=（{loadComponent1，loadComponent2}）=>
loadComponent1？：loadComponent2？：不是
加载；
返回(
)  
}
非常感谢。

如下更改页面加载器

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

页面和组件按钮应该是这样的

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

---

如下更改页面加载器

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

页面和组件按钮应该是这样的

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

我无法投票给你，因为我没有足够的声誉，但非常感谢manGlad帮助你：）我无法投票给你，因为我没有足够的声誉，但非常感谢manGlad帮助你：）