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

This article introduces the relevant knowledge of the "tutorial on the use of React Code". Many people will encounter such a dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Render only one condition

If you need to render something when the condition is true and nothing when the condition is false, instead of making a ternary expression, use & & instead.

Example is not recommended by ‍♂️:

Import React, {useState} from 'react' export const ConditionalRenderingWhenTrueBad = () = > {const [showConditionalText, setShowConditionalText] = useState (false) const handleClick = () = > setShowConditionalText (showConditionalText = >! showConditionalText) return (Toggle the text {/ * ternary expression * /} {showConditionalText?

The condition is True!

: null})}

? Recommended examples:

Import React, {useState} from 'react' export const ConditionalRenderingWhenTrueGood = () = > {const [showConditionalText, setShowConditionalText] = useState (false) const handleClick = () = > setShowConditionalText (showConditionalText = >! showConditionalText) return (Toggle the text {showConditionalText & &

The condition is True!

})}

two。 Each condition is rendered

If you need to render something when the condition is true and others when the condition is false. Use ternary expressions!

Examples that are not recommended by ‍♂️:

Import React, {useState} from 'react' export const ConditionalRenderingBad = () = > {const [showConditionOneText, setShowConditionOneText] = useState (false) const handleClick = () = > setShowConditionOneText (showConditionOneText = >! showConditionOneText) return (Toggle the text {/ * conditional True and False both render content * /} {showConditionOneText & &

The condition is True!

} {! showConditionOneText & &

The condition is Flase!

})}

? Recommended examples:

Import React, {useState} from 'react' export const ConditionalRenderingGood = () = > {const [showConditionOneText, setShowConditionOneText] = useState (false) const handleClick = () = > setShowConditionOneText (showConditionOneText = >! showConditionOneText) return (Toggle the text {showConditionOneText?

The condition must be true!

): (

The condition must be false!

)})}

3. Boolean props

It is recommended that the Props value of true be omitted.

Example is not recommended by ‍♂️:

Import React from 'react' const HungryMessage = ({isHungry}) = > ({isHungry? 'I am hungry':' I am full'}) export const BooleanPropBad = () = > (This person is hungry: This person is full:)

? Recommended examples:

Import React from 'react' const HungryMessage = ({isHungry}) = > ({isHungry? 'I am hungry':' I am full'}) export const BooleanPropGood = () = > (This person is hungry: {/ * there is no need to assign true, omit * /} This person is full:)

4. String props

The Props value is String, using double quotes instead of curly braces or backquotes.

Example is not recommended by ‍♂️:

Import React from 'react' const Greeting = ({personName}) = >

Hi, {personName}!

Export const StringPropValuesBad = () = > ()

? Recommended examples:

Import React from 'react' const Greeting = ({personName}) = >

Hi, {personName}!

Export const StringPropValuesGood = () = > ()

5. Event handler functions

If an event function accepts only one parameter, there is no need to pass in an anonymous function: onChange= {e = > handleChange (e)}, which is recommended: onChange= {handleChange}.

Example is not recommended by ‍♂️:

Import React, {useState} from 'react' export const UnnecessaryAnonymousFunctionsBad = () = > {const [inputValue, setInputValue] = useState ('') const handleChange = e = > {setInputValue (e.target.value)} return (Name: {/ * event has only one parameter, no anonymous function * /} handleChange (e)} / >)}

? Recommended examples:

Import React, {useState} from 'react' export const UnnecessaryAnonymousFunctionsGood = () = > {const [inputValue, setInputValue] = useState ('') const handleChange = e = > {setInputValue (e.target.value)} return (Name:)}

6. Components as props

When you pass a component as a parameter to another component, if the component does not accept any parameters, you do not need to wrap the passed component in a function.

Example is not recommended by ‍♂️:

Import React from 'react' const CircleIcon = () = > () const ComponentThatAcceptsAnIcon = ({IconComponent}) = > (

Below is the icon component prop I was given:

) export const UnnecessaryAnonymousFunctionComponentsBad = () = > ({/ * components do not need to be wrapped in functions * /}} / >)

? Recommended examples:

Import React from 'react' const CircleIcon = () = > () const ComponentThatAcceptsAnIcon = ({IconComponent}) = > (

Below is the icon component prop I was given:

) export const UnnecessaryAnonymousFunctionComponentsGood = () = > ()

7. Undefined props

Do not provide undefined as the fallback value if the parameter undefined is allowed.

Example is not recommended by ‍♂️:

Import React from 'react' const ButtonOne = ({handleClick}) = > (Click me) const ButtonTwo = ({handleClick}) = > {const noop = () = > {} return Click me} export const UndefinedPropsBad = () = > (alert (' export const UndefinedPropsBad')} / > alert ('export const UndefinedPropsBad')} / >)

? Recommended examples:

Import React from 'react' const ButtonOne = ({handleClick}) = > (Click me) export const UndefinedPropsGood = () > (alert (' Clickedlings')} / >)

8. Setting state depends on the previous state

If the new state depends on the previous state, state is always set to the function of the previous state. You can batch React status updates.

Example is not recommended by ‍♂️:

Import React, {useState} from 'react' export const PreviousStateBad = () = > {const [isDisabled, setIsDisabled] = useState (false) const toggleButton = () = > setIsDisabled (! isDisabled) const toggleButton2Times = () = > {for (let I = 0; I)

< 2; i++) { toggleButton() } } return ( I'm {isDisabled ? 'disabled' : 'enabled'} Toggle button state Toggle button state 2 times ) } ? 推荐示例： import React, { useState } from 'react' export const PreviousStateGood = () =>

{const [isDisabled, setIsDisabled] = useState (false) {/ * it is recommended to set to function * /} const toggleButton = () = > setIsDisabled (isDisabled = >! isDisabled) const toggleButton2Times = () = > {for (let I = 0; I < 2; iTunes +) {toggleButton ()} return (iTunm {isDisabled? Disabled': 'enabled'} Toggle button state Toggle button state 2 times)} "tutorial on how to use React Code" ends here. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.