具有不同屬性/狀態的克隆反應組件

我正在尋找克隆使用與原始組件相同的「機制」的反應組件，該組件不依賴於它。這裏是我的組元，一個小櫃檯（我是新來的反應，盡我所能去學習它）具有不同屬性/狀態的克隆反應組件

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

如果妳不明白，想的東西做同樣的事情，但有不同的狀態。我可以將新組件重寫爲原始組件，但我認爲這不是正確的方式。

來源

2016-08-31 Razvan Alex

我想你可以寫**擴展新的組件**你的組件和超載要表現不同 –

一些方法@Ivan Shmidt我可以從0改寫它，但這不是我要找的方式。 –

你不清楚你想做什麼。 'React.cloneElement'它可以幫助你。 –

將屬性值設置爲狀態值在React中是不好的做法。更好的方式使用你的組件與不同的道具，所有你需要的是傳遞道具和管理你的組件沒有狀態（普通數據除外）。根據這一點，如果你想要克隆的元素，你可以使用：

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

或只使用你的組件以不同的道具爲：

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

在這種情況下，你需要建立一個在你的組件層次結構頂部存儲（例如，redux，react-redux等），任何你打算在狀態中改變的東西都會在store中改變它，這會導致你的根組件重新渲染並將新的道具傳遞給你的孩子組件）。

來源

2016-08-31 13:33:47 erdysson

我會看看我能做些什麼。 –

如果你想重複使用不同道具的組件severalTimes。這裏有一個例子：

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

來源

2016-08-31 13:40:57

具有不同屬性/狀態的克隆反應組件

回答

相關問題