React類如何在同一文件中的所有方法中傳遞變量

Question

我在理解概念時遇到了問題。我想從renderWeather（）內部傳遞windColor變量到render（）和函數alertKitesurf我應該使用this.state和setState，或者我可以用變量來完成它嗎？

我的代碼不起作用。

PS。爲什麼在課堂外你需要添加函數method（），而在類的括號內卻不需要？

import React, .... 

class WeatherList extends Component { constructor(props) { 
    super(props); 
    this.fixit = 'blue'; } // render single city 
renderWeather(cityData) { 
     const lol = this; 
     const name = cityData.city.name; 
     const temp = cityData.list.map(weather => (weather.main.temp - 272)); 
     const humi = cityData.list.map(weather => weather.main.humidity); 
     const wind = cityData.list.map(weather => weather.wind.speed); 
     // Kitesurf alert! 
     console.log(lol.fixit); 
     const windColor = alertKitesurf(wind); 
     lol.fixit = windColor; 
     return (
      <tr key={name}> 
      <td className="col-md-3">{name}</td> 
      <Chart data={temp} color="blue" /> 
      <Chart data={humi} color="blue" /> 
      <Chart data={wind} color={windColor} /> 
      </tr> 
     ); } 


    render() { 
    let fixdiv; 
    if (this.fixit === 'blue') { 
     fixdiv = <div>test</div>; 
    } 
    else { 
     fixdiv = <div>OMG</div>; 
    } 
    return (
     <div> 
     <table className="table table-hover"> 
      <thead> 
      <tr> 
       <th className="col-md-3">City</th> 
       <th className="col-md-3">Temperature</th> 
       <th className="col-md-3">Humidity</th> 
       <th className="col-md-3">Wind Speed</th> 
      </tr> 
      </thead> 
      <tbody> 
      {this.props.weather.map(this.renderWeather)} 
      </tbody> 
     </table> 
     {fixdiv} 
     </div> 
    ); } } // function(state) -> function({weather}) -> weather : weather -> weather function mapStateToProps({ weather }) { return { weather }; } 

function alertKitesurf(wind) { let color = 'blue'; for (let windspeed of wind) { 
    if (windspeed > 7) { 
     color = 'red'; 
    } } if (color === 'red') { 
    alert("WIND SPOTTED! (14+knots) LETS GO KITSURF!"); } return color; } 

export default connect(mapStateToProps)(WeatherList); 

Answer 1

可以使用的狀態。

讓探險家這一段時間。

在你的構造函數傳遞

constructor(props) { 
 
    super(props) 
 
    this.state = { 
 
    windColor: 'blue' 
 
    } 
 
}

那麼這個類的任何方法中（包括渲染方法），你把它稱爲this.state.windColor。

即使您將它作爲參數傳遞，您也需要將其作爲somefunc(this.state.windColor)傳遞給它。

欲瞭解更多信息，請參閱本：In a react class: How do I pass a variable inside same component

和關於你的最後一個問題。

如果你的意思

爲什麼寫類&外function關鍵字沒有內部類中的函數關鍵字。

那麼這是更多的JavaScript語法轉換。我認爲你可以編寫函數關鍵字。

考慮使用箭頭函數的這種新方法，並綁定了this關鍵字。

class Awesomeness extends Component { 
 
    constructor(props) { 
 
    super(props) 
 
    } 
 
    
 
    some =() => { 
 
    console.log('something wild while this is bound to the class\'s this!') 
 
    } 
 
    
 
    render() { 
 
    return <div> You are awesome! </div> 
 
    } 
 
}

更多關於此閱讀這篇文章真棒：React Binding Patterns: 5 Approaches for Handling this

或者你可以輕鬆地將其理解爲這一點。

//This 
 

 
const obj = { 
 
    a: 1, 
 
    b() { 
 
    console.log(this.a) 
 
    } 
 
} 
 

 
//Equals this 
 

 
const obj = { 
 
    a: 1, 
 
    b: function() { 
 
    console.log(this.a) 
 
    } 
 
}