In WeatherForecast
组件我需要传递函数的返回值appColor
进入财产。那么该财产来自WeatherForecast
需要传入className
of 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>
);
}
}
您可以将函数从父级传递给子级,子级可以使用颜色调用该函数(几乎像事件处理程序一样操作)。当应用程序接收到颜色时,使用 .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>
);
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)