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

关于你的上一个问题。

如果你的意思是

为什么要在类和＆amp;之外编写函数关键字？没有类中的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)
  }
}

React Class如何在同一文件中的所有方法中传递变量

1 个答案: