創建一個可重用的組件reactjs

我讀過一篇文章，指出創建小型可重用組件會減小文件大小，使得單元測試更快更簡單，而且更多。所以我現在試圖創建一個，但是我對reactjs很陌生，而且我正在爲一個朋友維護這個項目，所以我沒有編寫所有的代碼。創建一個可重用的組件reactjs

繼承人的代碼片段：

class ObjectKeyDisplay extends Component { 
    constructor(props) { 
    super(props) 
    this.state = { open: false } // Sets open to false (closed) 
    } 

    renderInner() { 
    const { schema, parentDocumentId, collectionName, value } = this.props 
    const { open } = this.state // equals const open = this.state.open 

    let expandButton 
    if (schema.type === 'belongs_to') { 
     expandButton = (
     <button onClick={e => this.setState({ open: !open })}> // Sets it to true (opened) 
      {open ? 'Minimera' : 'Expandera'} 
     </button> 
    ) 
    }

所以我基本上要使整個開啓/關閉過程的組成部分，所以我輕鬆地重用其他按鈕的邏輯。如果有人能幫助我，我會很感激！

來源

2017-07-06 Martin Nordström

您錯過了我的代碼。但是我猜如果你正在尋找功能的可重用性，你應該深入研究高階組件模式 – larrydahooster

Here's a working example。

將按鈕移到它自己的組件中，它可以控制它自己的打開狀態。另外，當狀態改變可以在父組件中使用時提供一些回調是一個好主意。有多種條件呈現按鈕內容的方式。我在這裏所做的是傳入一組兒童，如果open爲true，則渲染數組中的第一個孩子。

class Main extends React.Component { 
    render(){ 
    return (
     <div> 
     Expand button 
     <ExpandButton onOpen={() => console.log('opened')} onClose={() => console.log('closed')} > 
      <div>Open</div> 
      <div>Close</div> 
     </ExpandButton> 
     </div> 
    ) 
    } 
} 
class ExpandButton extends React.Component { 
    constructor(){ 
    super(); 
    this.toggleOpen = this.toggleOpen.bind(this); 
    this.state = { 
     open: false 
    } 
    } 
    toggleOpen(){ 
    this.setState({ 
     open: !this.state.open 
    },() => { 
     // Trigger callbacks 
     if(this.state.open){ 
     this.props.onOpen(); 
     }else{ 
     this.props.onClose(); 
     } 
    }) 
    } 
    render(){ 
    const { open } = this.state; 
    return (
     <button onClick={this.toggleOpen}> 
     {open ? this.props.children[0] : this.props.children[1]} 
     </button> 
    ) 
    } 
} 
React.render(<Main />, document.getElementById('container'));

來源

2017-07-06 18:03:50

創建一個可重用的組件reactjs

回答

相關問題