从反应功能组件返回变量

Question

我有一个反应组件：

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
    );
  }
}

在这里，我需要在return（）中获取moduleCode的值，并将其分配给变量以进行进一步处理。 当我被分配为，

var moduleCode = this.getModuleCode(module);

它返回一个未定义的对象。 从函数返回值的正确方法是什么？

Answer 1

您可以在componentDidMount获取代码并将其存储在状态中。

例

 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> 

Answer 2

尝试在ComponentDidMount()调用函数

componentDidMount(){
  this.getModuleCode(this.props.module);
}

并将moduleCode置于状态，以便在调用didmount后可以接收它。

喜欢

  getModuleCode(module){
     var moduleCode = 0;
     // Do relevant calls and get moduleCode
     this.setState({moduleCode});
  }

在render中接收它 - this.state.moduleCode

Answer 3

您可以在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
        );
     }
}

Answer 4

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 } } 

Answer 5

如果要使用var moduleCode = this.getModuleCode(module); 在渲染函数中，您必须将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
    );
  }
}

希望有所帮助。