在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> …Run Code Online (Sandbox Code Playgroud) 我为carat一个bootstrap 创建了一个旋转函数dropup.问题是当我关闭时它没有转换(旋转)dropup.这是我的codepen的链接.http://codepen.io/theMugician/pen/OyjYed
dropup没有在codepen中关闭和打开.只需注意克拉
<div class="dropup" id="divDropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="caret"></span>
</button>
<ul class="dropdown-menu text-left" aria-labelledby="dropdownMenu2">
<li>PHONE</li>Stuff<li>{{basket.plan.phonePrice}}</li>
<li>MONTHLY PLAN</li><li>{{basket.plan.planPrice}}</li>
<li>ACCESSORIES</li><li>{{basket.accessoriesTotal}}</li>
<li>BUNDLE</li><li>{{basket.bundle.price}}</li>
</ul>
</div>
<footer id="cartFooter">
<div class="row cartInfo">
<div class="col-xs-4">
<p><i class="zmdi zmdi-shopping-cart"></i> CART</p>
</div>
<div class="col-xs-4 text-center">
<p>{{basket.total}}</p>
</div>
<div class="col-xs-4 text-right">
<p><a ng-click="emptyBasket()"><span class="zmdi zmdi-delete"></span></a></p>
</div>
</div>
</footer>
Run Code Online (Sandbox Code Playgroud)
CSS
.rotate {
transform: rotate(0deg);
transition: .3s;
}
.rotate2 {
transform: rotate(180deg);
transition: .3s;
}
Run Code Online (Sandbox Code Playgroud)
jQuery的
$(document).ready(function(){ …Run Code Online (Sandbox Code Playgroud)