將子標簽作為道具傳遞給函數中的組件

Question

我正忙於使用 ReactJS 創建模態並設法啟動和運行基本模態。 我有兩個屬性（show 和 handleClose）分配給 Modal 組件，並且我正在使用帶有鈎子的函數。 我的父文件 App.js 中有兩個 p 標簽（子標簽），如下所示，

<Modal show={mod} handleClose={hideModal} >
              <p>Modal</p>
              <p>Data</p>
            </Modal>

我想將 p-tags 作為道具傳遞給我的 Modal 組件，就像我使用 show 和 handleClose 屬性一樣。 我的問題是，如何使用 Functions 和 Hooks 將子標簽傳遞給組件？

下面是我完整的工作代碼，文件 App.js，

import React, {useState} from 'react';
import './App.css';
import Modal from './Modal';

function App() {
  const[mod, setMod] = useState(false);
  
  const showModal = () =>{
      setMod(true)
  }

  const hideModal = () =>{
    setMod(false)
  }
  
  return (
      <div>
        <h1 >My React modal</h1>
        <Modal show={mod} handleClose={hideModal} >
          <p>Modal</p>
          <p>Data</p>
        </Modal>
        <button type="button" onClick={showModal}>Show modal</button>
      </div>
  );
}

export default App;

Modal.js，

import React from 'react';
import './App.css';

function Modal (props) {
    
        return (
            <ShowModal show={props.show} handleClose={props.handleClose}/>
        );    
}

function ShowModal (props){ 
   const showHideClassName = props.show ? 'modal display-block' : 'modal display-none';
    
   return (
        <div className={showHideClassName} onClick={props.handleClose}>
            <section className="modal-main">
                {props.children}
                <button onClick={props.handleClose}>Close</button>
            </section>
        </div>
   );
}

export default Modal;

應用程序.css，

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width:100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

  .modal-main {
    position:fixed;
    background: white;
    width: 80%;
    height: auto;
    top:10%;
    left:50%;
    transform: translate(-50%,-50%);
  }

.display-block {
  display: block;
}

.display-none {
  display: none;
}

Answer 1

在鈎子和函數的情況下傳遞道具的工作類似於類組件。

您無法查看 Modal 的子道具是因為您試圖在 ShowModal 內部訪問它們，而 ShowModal 組件沒有任何自己的子項。 所以你需要將你從 App.js 的 Modal 組件接收到的 children props 傳遞給 ShowModal 的。

解決方案：

將您的 ShowModal 組件更改為以下內容。

<ShowModal show={props.show} handleClose={props.handleClose}>
  {props.children}
</ShowModal>

Answer 2

建議：你必須做一些道具鑽孔。 不要為一些小用例泄露代碼，這會使道具傳遞工作變得困難。

只需將 Modal 的props.children包裹在ShowModal組件中，當您從ShowModal調用props.children時，這也會傳遞給它。

代碼：

//Modal
function Modal (props) {
    
        return (
            <ShowModal show={props.show} handleClose={props.handleClose}>
              {props.children}
            </ShowModal>
        );    
}
//============================================
//or for short
 function Modal (props) {
    
        return (
            <ShowModal {...props}/> {/*As you don't have other props to use in Modal just pass with spread operator & that will pass all the props available to ShowModal*/}
        );    
}

Answer 3

1. 我建議 ShowModal 單獨作為 Modal 工作正常。

2. 通過添加paragraphOne 和paragraphTwo 作為條件道具，您可以獲得您的解決方案，而無需在未來的情況下使用它們。

代碼中的建議：

 import React from 'react'; import './App.css'; function Modal (props){ const showHideClassName = props.show ? 'modal display-block' : 'modal display-none'; return ( <div className={showHideClassName} onClick={props.handleClose}> <section className="modal-main"> {props.paragraphOne && ( <p>{props.paragraphOne}</p> )} {props.paragraphTwo && ( <p>{props.paragraphTwo}</p> )} {props.children} <button onClick={props.handleClose}>Close</button> </section> </div> ); } export default Modal;