[英]React: Sending function as props
我有一个主应用程序组件,它有 2 个 state 变量和 2 个按钮单击处理程序函数,这些单击处理程序更新了应用程序的 state。 App 内还有一个 PageLoader 组件,我想发送到 PageLoader(App 的函数和 state 变量)。 我想用 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
更改 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.