在reactjs中制作可重用的组件
在reactjs中制作可重用的组件
提问于 2016-11-30 07:54:16
我有以下代码，想把<ReactCSSTransitionGroup里面重复的内容代码去掉，放到一个单独的文件里--别往前看，来回传递道具从子/父，我该怎么做？这是可行的吗？
<div className="container">
<ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
<span key={this.state.showChild1} className="plus_icon">
<a onClick={() => this.onClick('child1')}>
<Img className={this.state.showChild1 ? 'plus_icon' : 'minus_icon'} />
</a>
</span>
</ReactCSSTransitionGroup>
{this.state.child1 ? <Child1-New /> : <div onClick={() => this.onClick('child1')}><Child1 /></div>}
</div>
<div className="container">
<ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
<span key={this.state.showChild2} className="plus_arrow">
<a onClick={() => this.onClick('child2')}>
<img className={this.state.child2 ? 'plus_icon' : 'minus_icon'} />
</a>
</span>
</ReactCSSTransitionGroup>
{this.state.child2 ? <Child2-New /> : <div onClick={() => this.onClick('child2')}><Child2 /></div>}
</div>
onClick(name) {
if (name === 'child1') {
this.setState({
showChild1: !this.state.showChild1,
});
} else if (name === 'child2') {
this.setState({
showChild2: !this.state.showChild2,
});
}计划实现以下目标：
<div className="container">
<ToggleView />
{this.state.child2 ? <Child2-New /> : <div onClick={() => this.onClick('child2')}><Child2 /></div>}
</div>回答 1
Stack Overflow用户
发布于 2016-11-30 15:01:52
如果您使用的是Node.js，那么在单独的JS文件中管理您的组件非常简单。
创建一个新的JS文件- ToggleView.js -作为示例。
var React = require('react');
module.exports = React.createClass({
render: function() {
return (
<div>
... Your markup etc here
</div>
);
});然后你可以在你想使用它的JS中请求它：
var ToggleView = require('ToggleView.js');然后使用它：
<div className="container">
<ToggleView />
</div>其次，如果您的状态是在您需要您的孩子能够访问的父级上管理的，那么您可以简单地向下支持他们。
function thisFunc(val) {
// do something
};将函数传递给子级
<ToggleView handleFunc={this.thisFunc} />在ToggleView.js中，如果您需要在单击时触发：
...
<a onClick={this.prop.handleFunc}>
<img ... />
</a>
...在此场景中，我们将thisFunc向下传到子对象，这将允许您在父对象上设置逻辑，无论您是否需要设置状态或其他什么。
希望这能有所帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40877930
复制相关文章
相似问题
腾讯云开发者
