異なるプロパティ/状態のクローンReact componet

Question

私は、元のコンポーネントと同じ「メカニズム」を使用する反応コンポーネントを複製することを望んでいます。ここに私のcomponenet、小さなカウンターがありますuは理解していなかった場合は、同じことを行いますが、異なる状態を持っている何かについて考える

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.cloneElement(element, {prop1: "a", prop2: "b", ...}) 

または同じように異なるの小道具を使用してコンポーネントを使用します。この場合

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

を、あなたはAを設定する必要がありますあなたのコンポーネント階層の最上部にstore（例えばredux、react-reduxなど）を保存し、州で変更しようとするものは店舗内で変更してルートコンポーネントの再レンダリングを行い、新しい小道具を子供に渡しますコンポーネント。

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>) 
    } 
}