Shulou(Shulou.com)06/01 Report--

This article mainly shows you "what are the react rendering methods", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "what are the react rendering methods" this article.

React rendering methods are: 1, the use of conditional expression rendering, suitable for the rendering of one of the two components; 2, the use of "&" operator, suitable for the rendering of a component with or without; 3, the use of variable output components to render; 4, the use of functional methods to output components or the use of functional components for rendering.

The operating environment of this tutorial: Windows7 system, react17.0.1 version, Dell G3 computer.

Several ways of conditional rendering of React components

Conditional expression rendering (for rendering in which one of the two components is chosen)

Render () {const isLoggedIn = this.state.isLoggedIn; return ({isLoggedIn? (): ());}

& operator rendering (for rendering with or without a component)

Function Mailbox (props) {const unreadMessages = props.unreadMessages; return (Hello! {unreadMessages.length > 0 & & You have {unreadMessages.length} unread messages. });}

Third, rendering with variable output components (suitable for rendering with multiple components under multiple conditions)

Render () {const isLoggedIn = this.state.isLoggedIn; const button = isLoggedIn? (): return ({button});}

Fourth, use functional methods to output components or use functional components for rendering (suitable for situations where multiple sub-components need to be output according to complex conditions)

1. Functional mode

RenderButton () {const isLoggedIn = this.state.isLoggedIn; if (isLoggedIn) {return ();} else {return ();}} render () {return ({this.renderButton ()});}

two。 Functional component

Function Greeting (props) {const isLoggedIn= props.isLoggedIn; if (isLoggedIn) {return;} return;} ReactDOM.render (/ / Try changing to isLoggedIn= {true}:, document.getElementById ('root')); that's all of the article "what are the react rendering methods?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.