I'd like to replace javascript's built in alert() function with a React Component that handles the same task: namely, showing a quick, dismissible message to the user.

Now, I can make this happen by creating a component and placing it in my markup. e.g. 

<div> <BunchOfComponents /> <MoreComponents /> <MyAlertDialog open={this.props.shouldShowAlert} /> </div>

And then make it show by controlling its open state via Redex or whatever.

However, what I'd like to do, it be able to not declare it in my markup and instead inject it into the dom via a function.

Something like...

myCoolFunction() { const alert = ( <MyAlert open={true} msg="Hello World" /> ) DOM.findNode('someID').insert(alert); <-- fake API obviously }

Is it possible to dynamically append components like that?

1

3 Answers

This is the dirty way I do it at work (that didn't sound right...)

I'm sure there's a better 'proper' way to do it but it cleans up after itself so it works for me.

Here are the key points:

Dialog trigger

//Your trigger function will render the dialog component to a newly created dummy div, // while also passing it into the component as a prop function showDialog() { var div = document.createElement('div'); ReactDOM.render( <Dialog container={div}/>, document.body.appendChild(div) ); }

Dialog component:

//When your dialog component closes it unmounts itself close(){ ReactDOM.unmountComponentAtNode(this.props.container); }, //Before unmount it cleans up after itself by removing the dummy div componentWillUnmount() { document.body.removeChild(this.props.container); },

Maybe react-portal can help you.

From the docs:

transports its child into a new React component and appends it to the document.body (creates a new independent React tree)

I use a lot (for dialogs/modals and menu popups). Very useful and lightweight.

2

It's possible to inject some custom stuff with DOM manipulation inside of React rendered tree, if it's rendered as an empty node. Assuming you have somewhere in react's render:

<div" rel="nofollow">refs instead of id. 
Usually, this stuff is being wrapped inside componentDidMount (where you insert) and componentWillUnmount (where you remove and unsubscribe from anything) methods.
 
Because, doing dirty tricks you probably want to avoid memory leaks. So, it's the way.
 
By the way, I don't think that it's the right way of approaching the problem you just described. What you could do instead, is something like this:
 
{ this.props.shouldShowAlert && <MyAlertDialog open={ true } /> } 
 
And then in will be actually mounted when it's opened, and unmounted when it's closed.
 
Still, it's way safer to control injection with the state or prop member. You really need to know what you're doing when you do direct DOM manipulation. Say, wrapping some jQuery plugin :). Then you're fine, cause there are no other way :).
  
    
Your Answer
     
Sign up or log in
  Sign up using Google  Sign up using Facebook  Sign up using Email and Password    
Post as a guest
    
 By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy