React Class 동일한 파일의 모든 메소드에서 변수를 전달하는 방법

Question

개념을 이해하는 데 문제가 있습니다. renderWeather() 내부에서 render() 및 function alertKitesurf에 windColor 변수를 전달하려고합니다.

this.state와 setState를 사용해야하며 그렇지 않으면 변수를 사용할 수 있습니까?

내 코드가 작동하지 않습니다.

추신. 클래스 외부에서 왜 필요없는 클래스의 괄호 안에 function 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

상태를 사용합니다.

한동안 탐색기를 사용하도록 설정합니다. 당신의 생성자에서

당신은 당신이 this.state.windColor로 참조 (render 메소드를 포함) 해당 클래스의 메서드 내 다음

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

를 전달합니다.

매개 변수로 전달하더라도 somefunc(this.state.windColor)으로 전달해야합니다. In a react class: How do I pass a variable inside same component

을 그리고 당신의 마지막 질문에 대한 :

자세한 내용은이를 참조하십시오.

클래스 내부의 기능 키워드가없는 클래스 & 외부 function 키워드를 작성하는 이유는

을 의미합니다.

글쎄, 자바 스크립트 구문 변환의 이상입니다. 비록 당신이 함수 키워드를 쓸 수 있다고 생각합니다.

키워드 바인딩과 함께 화살표 기능을 사용하는 새로운 방법을 생각해보십시오. 이에

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