/ここ

Question

を働いていないモーダル隠すためにReact.jsを使用すると、私のモーダルコンポーネントです：

'use strict'; 

import React from 'react'; 

const Modal = React.createClass({ 
    handleOverlayClick() { 
     this.setState({ showModal: false }); 
    }, 

    shouldComponentUpdate (newProps, newState) { 
     return newState.showModal !== this.props.showModal; 
    }, 

    render() { 
     const style = { 
      display: (this.props.showModal) ? 'block' : 'none' 
     }; 

     console.log(style); 

     return (
      <div className="modal-overlay" style={style}> 
       <div className="modal-container" onClick={this.handleOverlayClick}> 
        <div className="modal-content modal-input">Hello, world</div> 
       </div> 
      </div> 
     ); 
    } 
}); 

module.exports = Modal; 

そして、これは私がそれを呼び出しています方法です：

'use strict'; 

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import SplitButton from './split-button'; 
import EmmaButton from './emma-button'; 
import SelectEmailModal from './modals/email-select.modal'; 

const AddActionBtn = React.createClass({ 

    onClick() { 
     return "#"; 
    }, 

    handleSendMailing() { 
     return ReactDOM.render(<SelectEmailModal showModal={true} />, document.getElementById('modals')); 
    }, 

    handleWait() { 
     console.log("WAIT"); 
     return "#"; 
    }, 

    render() { 
     return (
      <SplitButton primaryLabel="ADD ACTION &#9660;" primaryAction={this.onClick}> 
       <ul> 
        <li><span onClick={this.handleSendMailing}>Send mailing</span></li> 
        <li><span onClick={this.handleWait}>Wait</span></li> 
       </ul> 
      </SplitButton> 
     ); 
    } 
}); 

module.exports = AddActionBtn; 

私がそう反応するように初心者くさいですよ私の無知をここで許してください。単にモーダルの表示/非表示をしたいだけです

Answer 1

多分、ここにエラーがありますか？
display: (this.props.showModal) ? 'block' : 'none'

showModalはそう、状態、ない小道具です： this.state.showModal