时空索引>> react-append-to-body>> 返回
项目作者： jpgorman

项目描述 ：
React Higher order component that allows you to attach components to the DOM outside of the main app.
高级语言： JavaScript
项目地址: git://github.com/jpgorman/react-append-to-body.git
创建时间： 2016-12-19T18:36:09Z
项目社区：https://github.com/jpgorman/react-append-to-body
开源协议：
下载


Build Status
npm version

React higher order component append to body

React Higher order component that allows you to attach components to the DOM outside of the main app. Supports React 16 and React 15 and less, so works with and without ReactDOM.createPortal.

Installation

  1. npm i react-append-to-body --save

Use

  1. import { componentWillAppendToBody } from "react-append-to-body";
  3. /* Some component that you want to attach to the DOM */
  4. function MyComponent({ children }) {
  5.   return <div className="myClassName">{children}</div>;
  6. }
  8. const AppendedMyComponent = componentWillAppendToBody(MyComponent);
  10. class MyApp extends React.Component {
  11.   render() {
  12.     return (
  13.       <div>
  14.         // this content will be rendered in the main app Some content on my page
  15.         // this content will be rendered outside of the main app
  16.         <AppendedMyComponent>
  17.           The content for my appended component
  18.         </AppendedMyComponent>
  19.       </div>
  20.     );
  21.   }
  22. }
  1. /* template */
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta content="width=device-width,initial-scale=1" name="viewport">
  6. </head>
  7. <body class="body">
  8.   <div id="my-app"></div>
  9.   <script src="/app.js"></script>
  10. </html>
  1. /* output */
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta content="width=device-width,initial-scale=1" name="viewport">
  6. </head>
  7. <body class="body">
  8.   <div id="my-app">
  9.     <div>
  10.     // this content will be rendered in the main app
  11.     Some content on my page
  12.     </div>
  13.   </div>
  14.   <div id="append-element-container">
  15.     <div class="myClassName">
  16.       The content for my appended component
  17.     </div>
  18.   </div>
  19.   <script src="/app.js"></script>
  20. </html>

Appending to a named DOM node

  1. const AppendedMyComponent = componentWillAppendToBody(MyComponent);
  2. class MyApp extends React.Component {
  3.   render() {
  4.     return (
  5.       <div>
  6.         Some content on my page // this content will be rendered in the main app
  7.         <AppendedMyComponent
  8.           subtreeContainer={"#my-named-element-to-append-with"}
  9.         >
  10.           The content for my appended component
  11.         </AppendedMyComponent> // this content will be rendered outside of the main
  12.         app
  13.       </div>
  14.     );
  15.   }
  16. }
  1. /* template */
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta content="width=device-width,initial-scale=1" name="viewport">
  6. </head>
  7. <body class="body">
  8.   <div id="my-app"></div>
  9.   /* dom node that content will be appended to */
  10.   <div id="my-named-element-to-append-with"></div>
  11.   <script src="/app.js"></script>
  12. </html>
  1. /* output */
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta content="width=device-width,initial-scale=1" name="viewport">
  6. </head>
  7. <body class="body">
  8.   <div id="my-app">
  9.     <div>
  10.     // this content will be rendered in the main app
  11.     Some content on my page
  12.     </div>
  13.   </div>
  14.   <div id="my-named-element-to-append-with">
  15.     <div class="myClassName">
  16.       The content for my appended component
  17.     </div>
  18.   </div>
  19.   <script src="/app.js"></script>
  20. </html>

With Context

If you want to persist Context into the appended component you can do this by simple setting the contextTypes on the appended component.

  1. // using React Router
  3. const Modal = componentWillAppendToBody(Modal);
  4. Modal.contextTypes = {
  5.   router: React.PropTypes.any.isRequired
  6. };

API

subtreeContainer a string that should contain a selector that will work with document.querySelector [MDN]: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Tests

npm run test

Demo

npm run demo

Then open up your browser at http://localhost:8777

See React docs for examples for your environment.