ReactJs（ES6）：從功能

我的代碼ReactJs（ES6）：從功能

class Box extends Component { 


    render() { 

     return(
      <div className="box" style={styles.box}> 
       <div className="img-container" style={styles}> 
        <img alt="Brand Logo" src={this.props.data.brand_logo} className="img-circle" id="brand_logo" width="50"/> 
       </div> 
       <ul className="box-basic-info-container"> 
        <li>{basic_info_keys[0]} : {basic_info[basic_info_keys[0]]}</li> 
        <li>{basic_info[basic_info_keys[1]]}</li> 
       </ul> 
       { 
        iconEllipsis 
       } 
       <div className="box-other-info-container" > 
        <ul className="other_info" style={styles.contactInfo} > 
         { 
          other_info_keys.map(function(item,i){ 
           return (<li key={i}>{item}: {other_info[item]}</li>) 
          }) 
         } 
        </ul> 
       </div> 
       {this.renderManagerModal()} 
      </div> 
     ) 



    } 
    renderManagerModal =() =>{ 
     return (
       <div> 
        <Modal show={this.state.showModal} onHide={this.close}> 
         <Modal.Header closeButton> 
          <Modal.Title>Managers</Modal.Title> 
         </Modal.Header> 
         <Modal.Body> 
         </Modal.Body> 
         <Modal.Footer> 
          <Button onClick={this.close}>Close</Button> 
         </Modal.Footer> 
        </Modal> 
       </div> 
     ) 



    } 
}

我是新來ES6語法渲染組件。我已經在ES5中使用了這個。但是這不適用於ES6。

this.renderthisManagerModal將返回一個空div

爲什麼會這樣呢？如何編寫一個返回組件的函數？我不想從不同的文件導入。我想將組件寫入同一個文件。

來源

2017-08-09 Vivek Iyer

你的'state'定義在哪裏？我看到你的模態的外觀取決於'this.state.showModal'。你在哪裏定義和更新它？ – alix

它被定義。當我在控制檯中看到它時，我的問題是模式不顯示在DOM結構中。 –

如果您在'renderManagerModal'方法內渲染一些純HTML，會發生什麼？如果它有效，那麼它是關於你的'Modal'組件，而不是'Box'組件。 – alix

你可以這樣做，但我會鼓勵你在反應中使用組件。它很乾淨，你可以確保關注點分離。

我想評論，但我的聲譽太低。告訴我，這是否工作？

renderManagerModal =() => { 
     return (
       <div> 
        Test 
       </div> 
     ) 
    }

來源

2017-08-09 11:57:22 Nocebo

我認爲一個好的辦法是把renderManagerModal在這樣的純組分：

//assuming your props are coming from the Box component 
    const RenderManagerModal = (props) => { 
     return (
       <div> 

        <Modal show={props.showModal} onHide={props.close}> 
         <Modal.Header closeButton> 
          <Modal.Title>Managers</Modal.Title> 
         </Modal.Header> 
         <Modal.Body> 
         </Modal.Body> 
         <Modal.Footer> 
          <Button onClick={props.close}>Close</Button> 
         </Modal.Footer> 
        </Modal> 
       </div> 
     ) 
    }

然後，你會把該組件的盒組件內部象下面這樣：

class Box extends Component { 

    showModal(){} 

    close{} 

    render() { 

     return(
      <div className="box" style={styles.box}> 
       <div className="img-container" style={styles}> 
        <img alt="Brand Logo" src={this.props.data.brand_logo} className="img-circle" id="brand_logo" width="50"/> 
       </div> 
       <ul className="box-basic-info-container"> 
        <li>{basic_info_keys[0]} : {basic_info[basic_info_keys[0]]}</li> 
        <li>{basic_info[basic_info_keys[1]]}</li> 
       </ul> 
       { 
        iconEllipsis 
       } 
       <div className="box-other-info-container" > 
        <ul className="other_info" style={styles.contactInfo} > 
         { 
          other_info_keys.map(function(item,i){ 
           return (<li key={i}>{item}: {other_info[item]}</li>) 
          }) 
         } 
        </ul> 
       </div> 
       <RenderManagerModal showModal={this.showModal} onHide={this.close}/> 
      </div> 
     ) 

    }

來源

2017-08-09 12:00:52

您在運行renderManagerModal時正在使用箭頭功能，因此詞彙this是renderManagerModal的範圍，而不是模態itse如果。要保留this你必須使用「舊」函數聲明function() {}

來源

2017-08-09 12:02:16 sunpietro

ReactJs（ES6）：從功能

回答

相關問題