これは反パターンですか？Reactjs

Question

私はちょうどReactを使い始め、小さなアプリで作業していますが、その間は小さなショーをしてモーダルを隠しています。私はそれをやり方が間違っている方法を知りたがっていました。これがアンチパターンの場合はどうすればいいですか？私は、このロジックを使用して行った

class App extends Component { 
    constructor(props) { 
     super(props); 
     this.state = {show: false}; 
     this.showModal = this.showModal.bind(this); 
    } 

    render() { 
     return (
      <div> 
       <h2 className={styles.main__title}>Helloooo!</h2> 
       <Modal ref='show'/> 
       <button onClick={this.showModal} className={styles.addtask}>&#x2795;</button> 
      </div> 
     ); 
    } 

    showModal(){ 
     this.setState({ 
      show: true 
     }); 
     this.refs.show.showModal(); 
    } 

} 

モーダル成分は、それがDOM要素をフックとdocument.queryselectorを使用して修正します。これは、反応におけるドム操作を行う正しい方法ですか？私が使用している

モーダルコードはこれです：

class Modal extends Component { 
constructor() { 
    super(); 
    this.hideModal = this.hideModal.bind(this); 
    this.showModal = this.showModal.bind(this); 
    this.state = { modalHook: '.'+styles.container }; 
} 

render() { 
    return (
     <div> 
      <div onClick={this.hideModal} className={styles.container}> 
       <div className={styles.container__content}> 
        <div className={styles.card}> 
         <div className={styles.card__header}> 
          <h2>Add new task</h2> 
         </div> 
         <div className={styles.card__main}> 
          <Input type="text" placeholder="enter the task title" /> 
          <Input type="textarea" placeholder="enter the task details" /> 
         </div> 
         <div className={styles.card__actions}> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    ); 
} 

showModal(){ 
    let container = document.querySelector(this.state.modalHook); 
    container.classList.add(styles.show);  
} 
hideModal(e){ 
    let container = document.querySelector(this.state.modalHook); 
    if(e.target.classList.contains(styles.container)){ 
     container.classList.remove(styles.show); 
    } 
} 
} 

Answer 1

あなたの例では、良いとシンプルに見えますが、それに応じてthisには良くない使いすぎrefsを行うことです。
また、hereのように状態を上げると便利です。

ここに私の例：

ここ

class Modal extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = {show: props.show}; 
    } 
    componentDidUpdate(prevProps, prevState) { 
     let modal = document.getElementById('modal'); 
     if (prevProps.show) { 
      modal.classList.remove('hidden'); 
     } else { 
      modal.className += ' hidden'; 
     } 
    } 
    render() { 
     return (
      <div id="modal" className={this.state.show ? '' : 'hidden'}> 
       My modal content. 
      </div> 
     ); 
    } 
} 
class App extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = {show: false}; 
     this.handleClick = this.handleClick.bind(this); 
    } 
    handleClick() { 
     this.setState(prevState => ({ 
      show: !prevState.show 
     })); 
    } 
    render() { 
     return (
      <div> 
       <button onClick={this.handleClick}> 
        Launch modal 
       </button> 
       <Modal show={this.state.show} /> 
      </div> 
     ); 
    } 
} 
ReactDOM.render(<App />, document.getElementById('root')); 

私は究極の真理をふり、しかし、あなたが希望する結果に到達することができますどのように別のオプションを提供しようとしないでください。

Answer 2

あなたが必要とすることをするには、リファレンスをまったく使用する必要はありません。子コンポーネントの下にある状態を小道具として渡すことができます。状態が更新されると、小道具は自動的に更新されます。その後、この小道具を使用してクラスを切り替えることができます。あなたは実際にそれを見ることができますjsbin here

const Modal = (props) => { 
    return (
    <div className={props.show ? 'show' : 'hide'}>modal</div> 
) 
} 

const styles = { 
    main__title: 'main__title', 
    addtask: 'addtask' 
} 

class App extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = {show: false}; 
     this.toggleModal = this.toggleModal.bind(this); 
    } 

    render() { 
     return (
      <div> 
       <h2 className={styles.main__title}>Helloooo!</h2> 
       <Modal show={this.state.show} /> 
       <button onClick={this.toggleModal} className={styles.addtask}>&#x2795;</button> 
      </div> 
     ); 
    } 

    toggleModal(){ 
     this.setState({ 
      show: !this.state.show 
     }); 
    } 

} 
ReactDOM.render(<App />, document.getElementById('root'));