固原站长网 资讯 编写简洁的React代码方案

编写简洁的React代码方案

副标题#e#

如果你不同意其中任何一条,那也完全没问题。

只对一个条件进行条件性渲染

如果你需要在一个条件为真时有条件地呈现一些东西,在一个条件为假时不呈现任何东西,不要使用三元运算符。使用&&运算符代替。

糟糕的例子:

import React, { useState } from 'react' 

 

export const ConditionalRenderingWhenTrueBad = () => { 

  const [showConditionalText, setShowConditionalText] = useState(false) 

 

  const handleClick = () => 

    setShowConditionalText(showConditionalText => !showConditionalText) 

 

  return ( 

    <div> 

      <button onClick={handleClick}>Toggle the text</button> 

      {showConditionalText ? <p>The condition must be true!</p> : null} 

    </div> 

  ) 

 好的例子:

import React, { useState } from 'react' 

 

export const ConditionalRenderingWhenTrueGood = () => { 

  const [showConditionalText, setShowConditionalText] = useState(false) 

 

  const handleClick = () => 

    setShowConditionalText(showConditionalText => !showConditionalText) 

 

  return ( 

    <div> 

      <button onClick={handleClick}>Toggle the text</button> 

      {showConditionalText && <p>The condition must be true!</p>} 

    </div> 

  ) 

 有条件的渲染是指在任何条件下

如果你需要在一个条件为真时有条件地呈现一个东西,在条件为假时呈现另一个东西,请使用三元运算符。

糟糕的例子:

import React, { useState } from 'react' 

 

export const ConditionalRenderingBad = () => { 

  const [showConditionOneText, setShowConditionOneText] = useState(false) 

 

  const handleClick = () => 

    setShowConditionOneText(showConditionOneText => !showConditionOneText) 

 

  return ( 

    <div> 

      <button onClick={handleClick}>Toggle the text</button> 

      {showConditionOneText && <p>The condition must be true!</p>} 

      {!showConditionOneText && <p>The condition must be false!</p>} 

    </div> 

  ) 

 好的例子:

import React, { useState } from 'react' 

 

export const ConditionalRenderingGood = () => { 

  const [showConditionOneText, setShowConditionOneText] = useState(false) 

 

  const handleClick = () => 

    setShowConditionOneText(showConditionOneText => !showConditionOneText) 

 

  return ( 

    <div> 

      <button onClick={handleClick}>Toggle the text</button> 

      {showConditionOneText ? ( 

        <p>The condition must be true!</p> 

      ) : ( 

        <p>The condition must be false!</p> 

      )} 

    </div> 

  ) 

 Boolean props

一个真实的props可以提供给一个组件,只有props名称而没有值,比如:myTruthyProp。写成myTruthyProp={true}是不必要的。

糟糕的例子:

import React from 'react' 

 

const HungryMessage = ({ isHungry }) => ( 

#p#副标题#e#

  <span>{isHungry ? 'I am hungry' : 'I am full'}</span> 

 

export const BooleanPropBad = () => ( 

  <div> 

    <span> 

      <b>This person is hungry: </b> 

    </span> 

    <HungryMessage isHungry={true} /> 

    <br /> 

    <span> 

      <b>This person is full: </b> 

    </span> 

    <HungryMessage isHungry={false} /> 

  </div> 

 好的例子:

import React from 'react' 

 

const HungryMessage = ({ isHungry }) => ( 

  <span>{isHungry ? 'I am hungry' : 'I am full'}</span> 

 

export const BooleanPropGood = () => ( 

  <div> 

    <span> 

      <b>This person is hungry: </b> 

    </span> 

    <HungryMessage isHungry /> 

    <br /> 

    <span> 

      <b>This person is full: </b> 

    </span> 

    <HungryMessage isHungry={false} /> 

  </div> 

上一篇
下一篇
返回顶部