将子标签作为道具传递给函数中的组件

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;