javascript - How can I append external DOM to React component? - Stack Overflow

admin管理员组

文章数量:1279048

I have a page with a form rendered in the server, it handles validation, and the correct value for the selects.

I want to hide the DOM of that form, and append it into a react ponent so I can use it in react-router.

const NewItem = React.createClass({  
  render() {                          
    return (                          
      <div>                           
        <h1>New item</h1>
        {/* I WANT THE FORM FROM THE PAGE HERE*/}
      </div>                          
    )                                 
  }                                   
})                                    

What is the best way to do it?

I have a page with a form rendered in the server, it handles validation, and the correct value for the selects.

I want to hide the DOM of that form, and append it into a react ponent so I can use it in react-router.

const NewItem = React.createClass({  
  render() {                          
    return (                          
      <div>                           
        <h1>New item</h1>
        {/* I WANT THE FORM FROM THE PAGE HERE*/}
      </div>                          
    )                                 
  }                                   
})                                    

What is the best way to do it?

• javascript
• reactjs

Share Improve this question Follow asked Sep 29, 2015 at 16:29 Adrian RibaoAdrian Ribao 1,43933 gold badges1111 silver badges99 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You have full access to the DOM in ponentDidMount. You can use refs to access the specific DOM element you want.

var NewItem = React.createClass({
    ponentDidMount: function () {
        this.refs.formTarget.appendChild(myFormDomElement);
    },

    render: function () {
        return React.DOM.div(null,
            React.DOM.h1(null, "New item"),
            React.DOM.div({ref: "formTarget"}));
    }
});

Note that in 0.14, a ref is a raw DOM element. Prior to that a ref was a react ponent and you had to call React.findDOMNode(it) to get the actual DOM element.

React > 16.3

Try using portals like in this ponent:

import {Component} from 'react';
import {createPortal} from 'react-dom';
import PropTypes from 'prop-types';

class DOMPortal extends Component {
    constructor(props) {
        super(props);
        this.el = document.createElement(props.ponent);
    }

    ponentDidMount() {
        this.props.parentEl.appendChild(this.el);
    }

    ponentWillUnmount() {
        this.props.parentEl.removeChild(this.el);
    }

    render() {
        return createPortal(
            this.props.children,
            this.el,
        );
    }
}

DOMPortal.propTypes = {
    parentEl: PropTypes.object.isRequired,
    ponent: PropTypes.string,
};

DOMPortal.defaultProps = {
    ponent: 'div',
};

Now you can pass your external DOM reference as the parentEl props to it:

<DOMPortal parentEl={decorator.contentWidget.domNode}>...children</DOMPortal>

React < 16.3

Using this.refs is "deprecated", try this instead :

render() {
 return <div ref={(DOMNodeRef) => {
                 this.ponentRef=DOMNodeRef;
                }}>
      ...
      </div>;
 }

Then this.ponentRef will be accesible in ponentDidMount() so you can append your external DOM element:

ponentDidMount(){
  this.ponentRef.appendChild(externalDOMelement);
}

Notes:

Remember that this.ponentRef changes over time (renders()), so you must update it wherever you are passing it to.

Check for a defined reference before using it: if(this.ponentRef){// ... your code}

Functional Components' refs are handled differently.

Source:

React Doc

React gives us the functionality dangerouslySetInnerHTML. it gives us the support of adding HTML element. for example

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

You can also use portals introduced in react-16 for appending React ponent anywhere in the tree by using following code.

ReactDOM.createPortal(child, container)

follow following link Portals for refference

本文标签： javascriptHow can I append external DOM to React componentStack Overflow