Question

我希望克隆一个使用与原始组件相同的“机制”的反应组件，它不依赖于它。这是我的组件，一个小柜台（我是新手做出反应，尽我所能去学习）

 class BreakCount extends React.Component {

  constructor(props) {
     super(props);
    this.state = {init: props.init}
    this.drop = this.drop.bind(this)
    this.add = this.add.bind(this)
  }

  drop() {
    if(this.state.init > 1) {
      this.setState ({
      init: this.state.init - 1
    });
    }
  }

  add() {
    this.setState({
      init: this.state.init + 1
    })
  }


  render() { 
    return (<div id = 'bc'>
      <button onClick={this.drop}>-</button>
       <button>{this.state.init}</button>
       <button onClick = {this.add}>+</button>
      </div>)
  }
}

如果你不明白，想想一些做同样事情但有不同状态的事情。我可以将新组件重写为原始组件，但我认为这不是正确的方法..

Answer 1

将道具设置为状态值是React中的不良做法。使用不同道具的组件更优雅的方式，您只需要传递道具并管理没有状态的组件（常见数据除外）。根据这个，如果你想克隆元素，你可以使用：

React.cloneElement(element, {prop1: "a", prop2: "b", ...})

或者只使用不同道具的组件：

<Element prop1="a" prop2="b" />
<Element prop1="c" prop2="d" />

在这种情况下，您需要在组件层次结构的顶部设置一个商店（例如redux，react-redux等），并且您打算在状态中更改的任何内容都应该在商店内部进行更改，这将导致您的root组件重新呈现并将新的props传递给子组件。

Answer 2

如果你想重复使用不同道具的那个组件。这是一个例子：

import BreakCount from './breakCount.jsx'; 
export default class ParentClass extends React.Component{
    render() {
        return(
            <div>
                <BreakCount init={3}/>
                <BreakCount init={1}/>
                <BreakCount init={200}/>
            </div>
        );
    }     }

将导出添加到breakCount类：

export default class BreakCount extends React.Component {

  constructor(props) {
     super(props);
    this.state = {init: props.init}
    this.drop = this.drop.bind(this)
    this.add = this.add.bind(this)
  }

  drop() {
    if(this.state.init > 1) {
      this.setState ({
      init: this.state.init - 1
    });
    }
  }

  add() {
    this.setState({
      init: this.state.init + 1
    })
  }


  render() { 
    return (<div id = 'bc'>
      <button onClick={this.drop}>-</button>
       <button>{this.state.init}</button>
       <button onClick = {this.add}>+</button>
      </div>)
  }
}

具有不同属性/状态的克隆React组件

2 个答案: