Shulou(Shulou.com)05/31 Report--

This article focuses on "how to create dialog box components in React". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to create dialog box components by React.

It's easy to create a dialog box with a native front-end system. However, if you put it into the component-based react system, it is still troublesome to make your own dialog box. There are two main problems encountered: one is how to create a dialog box component under body in the subcomponents, and the other is how to delete this component.

Next, we will solve these two problems step by step.

Let's first write the dialog component: (all the styles are not written, here is a prototype)

Class Dialog extends Component {constructor (props) {super (props) } render () {return ({this.props.title} {this.props.children} cancel / / here determine the method of receiving the closing dialog box passed by the parent component)}}

To dynamically create components into body, react provides us with a method: ReactDOM.unstable_renderSubtreeIntoContainer (parent,component,dom), parent is generally this, components are dialog components, and dom is the dom node to be inserted.

According to this method, we can write a parent component for the dialog box, which can be used to center the full screen display:

Class DialogCenter extends Component {constructor (props) {super (props);} appendToBody () {ReactDOM.unstable_renderSubtreeIntoContainer (this, this is the content, this.container)} componentDidMount () {this.container = document.createElement ('div') $(this.container) .addClass ("global-hide"); document.body.appendChild (this.container); this.appendToBody ()} componentDidUpdate () {this.appendToBody ()} componentWillUnmount () {document.body.removeChild (this.container)} render () {return null;}}

So we solved the first problem, so how do we call this component next?

Here is the parent component of the invocation dialog box

/ / launch the dialog box, select a career, and start the exam class BeginExamComponent extends Component {constructor (props) {super (props);} / / use the function to dynamically create the component renderDialog () {if (this.props.isShow) {console.log ("start creating dialog box components") in render Return (/ / pass the method to close the dialog box)} else {return null / / this is actually the so-called delete component}} render () {return (click the button Please confirm the information and start the exam. Start the exam / / start the dialog function simulation test {this.renderDialog ()}

Here we can see that we use a renderDialog function to dynamically create a dialog component in render. The reason why we can write this directly is that our previous DialogCenter component implements the ReactDOM.unstable_renderSubtreeIntoContainer method, so this component will be rendered directly in the direct child node of body.

Export class Home extends Component {constructor () {super (); this.state= {showDialog:false}} showDialog () {console.log ("call dialog box"); this.setState ({showDialog:true})} closeDialog () {console.log ("uninstall dialog box") This.setState ({showDialog:false})} render () {return ()} so far, I believe you have a better understanding of "how to create dialog box components in React". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.