[英]Passing a function down multiple children components in React using ES6
我有一个LayoutComponent
, PageComponent
和SingleComponent
。
当我的用户点击一个按钮,我想在显示信息给用户NewPageComponent
我的应用程序的路由使用流星的FlowRouter
。
为此,我将消息存储在LayoutComponent
的状态中,然后通过PageComponent
将此消息和handlerMethod
作为props传递给SingleComponent
, PageComponent
是一个无状态功能组件。
我没有运气将handlerMethod
正确地传递给SingleComponent
,以便在LayoutComponent
上设置消息状态。
我知道这是一个简单的语法问题,但有人可以帮我找到我的错误吗?
LayoutComponent:
export default class LayoutComponent extends Component {
constructor() {
super();
this.state = {
message: null
};
this.handlerMethod = this.handlerMethod.bind(this);
}
handlerMethod(message) {
this.setState({ message: message });
}
render() {
// the PageComponent is actually passed via FlowRouter in this.props.content, so it needs to be cloned to add props
let contentWithProps = React.cloneElement(this.props.content, { message: this.state.message, handlerMethod: ((message) => this.handlerMethod) });
return (
<div>{contentWithProps}</div>
);
}
}
PageComponent:
const PageComponent = ({ message, handlerMethod }) => {
return (
<div>
<SingleComponent message={message} handlerMethod={(message) => handlerMethod} />
</ div>
);
}
零件:
export default class SingleComponent extends Component {
constructor() {
super();
this.state = {
};
this.handleButtonClick = this.handleButtonClick.bind(this);
}
handleButtonClick(event) {
event.preventDefault();
// do some more stuff...
this.props.handlerMethod("You pressed the button!");
FlowRouter.go("newPage");
}
render() {
<div>
<button onClick={this.handleButtonClick}>button</button>
</div>
}
}
您实际上handlerMethod
在发布的代码中调用handlerMethod
。 所以这:
handlerMethod: ((message) => this.handlerMethod)
应该是:
handlerMethod: ((message) => this.handlerMethod(message))
或者更简单:
handlerMethod: this.handlerMethod
你的错误是你传递的函数将返回this.handlerMethod
而不是调用它:
handlerMethod: ((message) => this.handlerMethod) // this returns the handlerMethod function, doesn't call it
应该
handlerMethod: ((message) => this.handlerMethod(message))
你也可以直接传递它:
handlerMethod: this.handlerMethod
直接传递它的原因是因为你在LayoutComponent
的构造函数中绑定了handlerMethod
的上下文,这意味着this
handlerMethod
内部将被修复为LayoutComponent
( 参见下面的注释 )
这是一个简短的例子:
布局组件
export default class LayoutComponent extends Component {
constructor() {
// ...
this.handlerMethod = this.handlerMethod.bind(this); // handler is bound
}
handlerMethod(message) {
// ...
}
render() {
let contentWithProps = React.cloneElement(
this.props.content, {
message: this.state.message,
handlerMethod: this.handlerMethod // pass the handler directly
}
);
return <div>{contentWithProps}</div>;
}
}
页面组件
// pass the handlerMethod directly
const PageComponent = ({ message, handlerMethod }) => {
return (
<div>
<SingleComponent message={message} handlerMethod={handlerMethod} />
</ div>
);
}
单一组件
export default class SingleComponent extends Component {
// ...
handleButtonClick(event) {
// ...
this.props.handlerMethod("You pressed the button!"); // call the passed method here
// ...
}
// ...
}
注 :从技术上讲,你可以重写约束this
通过调用new this.handlerMethod
但这是不会发生那么你的罚款。
如果你只想传递方法,你可以这样做:
const PageComponent = ({ message, handlerMethod }) => {
return (
<div>
<SingleComponent message={message} handlerMethod={handlerMethod} />
</ div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.