[英]Returning a variable from react functional component
I have a react component as : 我有一个反应组件:
class ModulesListing extends React.Component {
render(){
const module = this.props.module;
getModuleCode(module){
var moduleCode = 0;
// Do relevant calls and get moduleCode
return moduleCode;
}
return (
//Info to display
);
}
}
Here, I need to get the value of moduleCode within return() and assign it to a variable to do further processing. 在这里,我需要在return()中获取moduleCode的值,并将其分配给变量以进行进一步处理。 when I assigned as,
当我被分配为,
var moduleCode = this.getModuleCode(module);
it returns an undefined object. 它返回一个未定义的对象。 What is the correct way of returning a value from a function?
从函数返回值的正确方法是什么?
You could get the code in componentDidMount
and store it in state instead. 您可以在
componentDidMount
获取代码并将其存储在状态中。
Example 例
function doCall() { return new Promise(resolve => setTimeout(() => resolve("code"), 1000)); } class ModulesListing extends React.Component { state = { code: null }; componentDidMount() { this.getModuleCode(); } getModuleCode = module => { doCall(this.props.module).then(code => { this.setState({ code }); }); }; render() { const { code } = this.state; if (code === null) { return null; } return <div> {code} </div>; } } ReactDOM.render(<ModulesListing />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>
Try calling a function in ComponentDidMount()
as 尝试在
ComponentDidMount()
调用函数
componentDidMount(){
this.getModuleCode(this.props.module);
}
and put moduleCode
in state so that you can receive it after it calls didmount
. 并将
moduleCode
置于状态,以便在调用didmount
后可以接收它。
like 喜欢
getModuleCode(module){
var moduleCode = 0;
// Do relevant calls and get moduleCode
this.setState({moduleCode});
}
receiving it in render - this.state.moduleCode
在render中接收它 -
this.state.moduleCode
You can define a state and set the state in getModuleCode function an use it wherever you want. 您可以在getModuleCode函数中定义状态并设置状态,并在任何地方使用它。
class ModulesListing extends React.Component {
componentDidMount(){
this.getModuleCode(this.props.module);
}
render(){
const module = this.props.module;
getModuleCode = (module) => {
var moduleCode = 0;
// Do relevant calls and get moduleCode
this.setState({moduleCode})
}
return (
const {moduleCode} = this.state;
//Info to display
);
}
}
getModuleCode must reside outside render function and binded to "this" contex through bind or arrow function getModuleCode必须驻留在render函数之外,并通过bind或arrow函数绑定到“this”上下文
class ModulesListing extends React.Component { getModuleCode = (module) => { const moduleCode = 0; // Do relevant calls and get moduleCode return moduleCode; } render(){ // render } }
If you want to use var moduleCode = this.getModuleCode(module);
如果要使用
var moduleCode = this.getModuleCode(module);
in your render function, you will have to define getModuleCode(module)
as a method in the component class and not in the render function. 在渲染函数中,您必须将
getModuleCode(module)
定义为组件类中的方法,而不是渲染函数中的方法。
class ModulesListing extends React.Component {
getModuleCode(module){
var moduleCode = 0;
// Do relevant calls and get moduleCode
return moduleCode;
}
render(){
const module = this.props.module;
var moduleCode = this.getModuleCode(module);
return (
//Info to display
);
}
}
Hope that helps. 希望有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.