Question

我有以下代码，想要将<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>

Answer 1

如果您正在使用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 向下移动到子节点，这将允许您在父节点处设置逻辑，无论您是否需要设置状态或其他。

希望这有帮助！

在reactjs中制作可重用的组件

1 个答案: