Expression before return of a method in react

问题:

I have a method in my render method

render(){
    const { x } = this.state; 
    return(
        {this.someMethod(x)}
    )
}

someMethod(x){
   return(
      <div>some content</div>
   )
}

Can I still do expression in someMethod? This will not work

someMethod(x){
       x === 1 ? 2 : 3; <-- this will not work
       return(
          <div>some content</div>
       )
    }

I know I can do expression within jsx but I don't want to. How to do expression before the return?

回答1:

Wrap your call within a div and assign the expression value to another variable

class App extends React.Component {
   state = { x: 1}
   
   someMethod(x){
   console.log('here');
    var g = (x === 1) ? 2: 3
     return(
        <div>some content {g}</div>
     )
  }
   render(){
    const { x } = this.state; 
    return(
        <div>{this.someMethod(x)}</div>
    )
  }

  
}

ReactDOM.render(<App/>, document.getElementById('app'))

<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="app"></div>