返回前的表达式反应 [英] Expression before return of a method in react

问题描述

我的渲染方法中有一个方法

  render（）{
 const {x} = this。州; 
 return（
 {this.someMethod（x）} 
）
} 
 
 someMethod（x）{
 return（
< div>某些内容< / div> 
）
} 
  

我还能在某些方法中表达吗？这不会工作

  someMethod（x）{
 x === 1？ 2：3; <  - 这不会工作
 return（
< div>某些内容< / div> 
）
} 
  / pre> 
 
 
我知道我可以在jsx中表达，但我不想。 
解决方案
将您的调用包含在div中，并将表达式值分配给另一个变量
 
 
 
 
 
 
  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'）） / pre> 
 < script src =https://cdnjs.cloudflare.com/ajax/libs/ react / 15.1.0 / reactions.min.js>< / script>< script src =https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min .js>< / script>< div id =app>< / div>  
 
 
 > 
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?
解决方案
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>





                        
这篇关于返回前的表达式反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！