如何解决如何从组件运行 App.js 中的函数
抱歉,总的来说,我对 react.js 和 Javascript 还是很陌生,所以这可能是一个非常简单的答案,但出于上帝的爱。我找不到有效的答案。
在我的 App.js
中,我有一个简单的方法来重置一些变量。
App.js
import React,{ Component } from 'react';
import KeyPress from './components/KeyPress';
...
const initialState = {
text: GetText(),userInput: '',symbols: 0,sec: 0,started: false,finished: false
}
const ThemeContext = React.createContext(initialState);
class App extends Component {
state = initialState;
restart = () => {
this.setState(initialState)
}
...
在我的组件文件中,我有一个如下所示的结构。
KeyPress.js
import React,{ Component } from 'react'
export class KeyPress extends Component {
render() {
return (
<div>
</div>
)
}
}
export default KeyPress
文件结构
src
├── App.js
├── components
├── GetText.js
├── KeyPress.js
我如何才能从 restart()
调用 App.js
中的函数 KeyPress.js
(希望重置 initialState
中的所有值)
解决方法
在您的 App 类组件中,您将拥有:
restart = () => {
this.setState(initialState)
}
render() {
return(
<div>
<KeyPress resetMethod={this.restart} />
</div>
);
}
然后在 KeyPress.js 中:
render() {
return <button onClick={this.props.resetMethod}>Reset</button>;
}
,
有多种可能的解决方案:
-
假设
KeyPress
是从App
内部渲染的,将restart
函数作为 prop 传递,例如<KeyPress restart={restart} />
。 -
Use the Context API to manually create a global state 或使用像 Redux 这样的库。
尝试从 app.js 导出函数并将其导入到 comp 如果它不起作用在根目录中创建一个文件并从那里创建和导出函数
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。