代码之家 › 专栏 › 技术社区 › usergs

从react函数组件返回变量

function reactjs javascript

1

usergs · 技术社区 · 7 年前

我的反应成分如下:

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

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

5 回复 | 直到 7 年前

1

Tholle 7 年前

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>

2

1

Manoz 7 年前

ComponentDidMount()

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

moduleCode didmount

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

this.state.moduleCode

3

0

Harshal Yeole 7 年前

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

4

0

Mosè Raguzzini 7 年前

class ModulesListing extends React.Component {
  getModuleCode = (module) => {
   const moduleCode = 0;
   // Do relevant calls and get moduleCode
   return moduleCode;
  }
  render(){
   // render
  }
}

5

0

Chukwuemeka Onyenezido 7 年前

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