11在React中使用第三方组件_react 引入第三方插件-优快云博客

本文链接：https://blog.youkuaiyun.com/u012872771/article/details/103599687

本文介绍了在React的JSX模板中传递DOM节点的两种方法：通过props自定义属性和使用children子节点。同时，展示了如何使用React Modal组件创建模态窗口，并详细解释了其属性如isOpen和onRequestClose的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在jsx模板中传dom节点的两种方法：
方法一：使用props自定义属性。

import React from "react";
import ReactDOM from "react-dom";

const Layout = (props) => {
    return (
        <div>
            <p>上</p>
            {props.content}
            <p>下</p>
        </div>
    )
}

ReactDOM.render(<Layout content={(
    <p>中</p>
)}/>, document.getElementById("root"));

在这里插入图片描述
方法二：使用children子节点

import React from "react";
import ReactDOM from "react-dom";

const Layout = (props) => {
    return (
        <div>
            <p>上</p>
            {props.children}
            <p>下</p>
        </div>
    )
}

ReactDOM.render(<Layout>
    <p>我是用children传进来的dom</p>
</Layout>, document.getElementById("root"));

在这里插入图片描述

下载第三方组件react-modal:

npm install react-modal --save

ReactModal的属性isOpen为true显示，false隐藏，onRequestClose可以设置按ESC或点击模态框以外的地方可以做设置。可以用这个属性给isOption中的属性该给undefined。

import React from "react";
import ReactModal from "react-modal";

const Modal = (props) => {
    return (
        <ReactModal 
            isOpen={!!props.selectedOption}
            onRequestClose={props.handleClearSelectedOption}>
            <h3>幸运英雄：</h3>
            <p>{props.selectedOption}</p>
            <button onClick={props.handleClearSelectedOption}>好的</button>
        </ReactModal>
    )
}
export default Modal;

在这里插入图片描述