gpt4 book ai didi

javascript - 如何修复 React 中的 '_this4.props.handleExport' 错误

转载 作者:行者123 更新时间:2023-12-03 00:31:14 25 4
gpt4 key购买 nike

我在子组件下的子组件中设置的父组件中使用了handleExport函数。但是,会出现以下错误,并且效果不佳。

_this4.props._handleExport is not a function

src/components/PrimaryItem.js

export default class PrimaryItem extends Component {
render() {
return (
<Stage
ref={ref => {
this.props._handleExport(ref);
}}
>
</Stage>
);
}
}

src/components/PrimaryContainer.js

import PrimaryItem from "./PrimaryItem";


<PrimaryContainer
_handleExport={this._handleExport}
/>

src.App.js

import PrimaryItem from "./components/PrimaryContainer";

export default class App extends component {
_handleExport = ref => {
if (ref) {
this.refStage = ref;
}
};
render() {

return(
<PrimaryContainer
_handleExport={this._handleExport}
/>
)
}
}

最佳答案

您可以像这样通过传递到子容器的 props 来冒泡请求。

// --- parent.js

import React, { Component, Fragment } from "react";
import { ChildComponent } from './containers/child'

export class ParentContainer extends Component {

handleUpdate = () => {
// whatever you want to do here
console.log('I have been clicked from ChildContainer')
}

render() {
return (
<Fragment>
<ChildComponent onUpdate={this.handleUpdate} />
</Fragment>
);
}
}

// --- child.js

import React, { Component, Fragment } from "react";

export class ChildComponent extends Component {

constructor(){
super()
console.log(this.props) // will show you the props you have access to pass into components.
}

render() {
return (
<button onClick={this.props.onUpdate}></button>
);
}
}

关于javascript - 如何修复 React 中的 '_this4.props.handleExport' 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53862303/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com