我正在尝试找到正确的方法来定义一些可以通用方式使用的组件:
<Parent>
<Child value="1">
<Child value="2">
</Parent>
当然,父级和子级组件之间的渲染有一个逻辑,你可以想象<select>并<option>作为这种逻辑的一个例子.
对于问题,这是一个虚拟实现:
var Parent = React.createClass({
doSomething: function(value) {
},
render: function() {
return (<div>{this.props.children}</div>);
}
});
var Child = React.createClass({
onClick: function() {
this.props.doSomething(this.props.value); // doSomething is undefined
},
render: function() {
return (<div onClick={this.onClick}></div>);
}
});
问题是每当你{this.props.children}用来定义包装器组件时,如何将一些属性传递给它的所有子组件？
我只需要使用jQuery动画,请不要提及过渡.
这是我的代码库
var CommentForm = React.createClass({
componentWillUnmount: function(cb) {
console.log('hiding')
jQuery(this.getDOMNode()).slideUp('slow', cb);
console.log((this.getDOMNode()))
},
componentDidMount: function() {
jQuery(this.getDOMNode()).hide().slideDown('slow');
if (this.props.autofocus) {
jQuery(this.refs.commentArea.getDOMNode()).focus();
}
},
render: function() {
return (
<div>
<div className="panel-footer" ref="commentComponent">
<form role="form">
<div className="form-group">
<textarea className="form-control" placeholder="Say something nice!" ref="commentArea"></textarea>
</div>
<div className="pull-right">
<button className="btn btn-default btn-md" type="button"><span className="fa fa-comment"></span> Comment</button>
</div>
<div className="clearfix"></div>
</form>
</div>
</div>
);
}
});
正如您所看到的,我可以在安装组件时添加一个非常棒的动画,但我无法使用动画卸载组件,就像我在代码中提到的那样.
有没有想过如何使用jQuery做到这一点？和Reactjs组件生命周期？
使用React Motion的TransitionMotion,我想要进出一个或多个框的动画.当一个框进入视图时,它的宽度和高度应该从0像素到200像素,并且它的不透明度应该从0到1.当框离开视图时,反向应该发生(宽度/高度= 0,不透明度= 0 )
我试图解决这个问题http://codepen.io/danijel/pen/RaboxO但我的代码无法正确转换框.盒子的样式立即跳到200像素的宽度/高度而不是过渡.
代码有什么问题？
let Motion = ReactMotion.Motion
let TransitionMotion = ReactMotion.TransitionMotion
let spring = ReactMotion.spring
let presets = ReactMotion.presets
const Demo = React.createClass({
getInitialState() {
return {
items: []
}
},
componentDidMount() {
let ctr = 0
setInterval(() => {
ctr++
console.log(ctr)
if (ctr % 2 == 0) {
this.setState({
items: [{key: 'b', width: 200, height: 200, opacity: 1}], // fade box in
});
} else {
this.setState({
items: [], // fade …我刚刚开始使用Velocity.js，并尝试制作一个简单的动画，在该动画中我将圆圈的颜色从红色更改为黄色。我拥有的HTML只是...
<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.ui.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<svg height=300 width=300>
<circle id="example" cx=50 cy=50 r=20 fill="red"></circle>
</svg>
</body>
</html>
...并且我试图像这样在我的JavaScript中将圆圈的颜色更改为黄色：
$('#example')
.delay(1000)
.velocity({fill: "yellow"});
我究竟做错了什么？