将支持从孩子传给父母React

时间:2016-11-16 23:19:10

标签: javascript reactjs

WeatherForecast组件中,我需要将函数appColor的返回值传递给属性。然后,WeatherForecast中的属性需要传递到className app组件中。新的反应。不确定如何将属性从子节点传递给组件。

class WeatherForecast extends Component {

  appColor(weatherData) {
    //Check for condition and return value
    return "example-color1"
  }

  render() {
    /************************************
    // Need to Pass returned value of Function into propery or variable?
    /************************************/ 
    let bgColor = appColor(weatherData);

    return (
      <div className="text-center col-xs-12">

         <h1 id="temp">{this.displayTemp(this.props.weather)}</h1>
         <h1>{this.displayCity(this.props.weather)}</h1> 

      </div>
    );
  }
}



export default class App extends Component {

  render() {
    return (
      <div className={"app-container" + this.AppColorPropertyClass}>

        <div className="main-wrapper">

            <WeatherForecast bgColorPropertyClass={this.AppColorPropertyClass} />

        </div> 

      </div>  

    );
  }
}

1 个答案:

答案 0 :(得分:7)

您可以将一个函数从父级传递给子级,子级可以使用该颜色调用该函数(几乎像事件处理程序一样运行)。当在App中收到颜色时,使用.setState()将其分配给状态值,然后在render()

中拾取它。
export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = { appColorClass: 'some-default-color' };
  }

  setAppColor(colorClass) {
    this.setState({ appColorClass: colorClass });
  }

  render() {
    return (
      <div className={"app-container" + this.state.appColorClass}>

        <div className="main-wrapper">

          <WeatherForecast getBgColorPropertyClass={ color => this.setAppColor(color) } />

        </div>

      </div>

    );
  }
}


class WeatherForecast extends Component {
  componentWillMount() {
    if (this.props.getBgColorPropertyClass) {
      // TODO: Get "weatherData" from somewhere (maybe from this.props.weather ??)
      this.props.getBgColorPropertyClass(this.appColor(weatherData));
    }
  }

  appColor(weatherData) {
    //Check for condition and return value
    return "example-color1"
  }

  render() {
    return (
      <div className="text-center col-xs-12">

         <h1 id="temp">{this.displayTemp(this.props.weather)}</h1>
         <h1>{this.displayCity(this.props.weather)}</h1> 

      </div>
    );
  }
}