0

这是一个使用 state 和 setState 的类组件，但我想使用 useState。此外，除了能够使用功能组件而不是类基组件之外，还有什么好处？

    import React, {Component} from "react"

    class Toggler extends Component {
        state = {
            on: this.props.defaultOnValue
        }

        toggle = () => {
            this.setState(prevState => {
                return {
                    on: !prevState.on
                }
            })
        }
static 
    defaultProps = {
        defaultOnValue: false
    }

        render() {
            return (
                <div>
                    {this.props.render(this.state.on, this.toggle)}
               </div>
            )
        }
    }

    export default Toggler

至今...

    import React, {useState} from "react"

    function Toggler() {
        const [on, setOn] = useState(this.props.defaultOnValue)

        toggle = () => {
            setOn( {/* what should go here? */} )

        }
static 
    defaultProps = {
        defaultOnValue: false
    }

        return (
                <div>
                    {this.props.render(on, toggle)}
                </div>
            )
    }

    export default Toggler
4

1 回答 1

1

切换你的状态值就像反转从返回的当前值一样简单useState。

功能组件接收作为参数传递给它们的道具，因此无需使用this.props. 此外，要在功能组件上设置静态属性，您可以在函数本身上设置它们。

function Toggler(props) {
  const [on, setOn] = useState(props.defaultOnValue)
  const toggle = () => {
    setOn(!on)
  }
  return <div>{props.render(on, toggle)}</div>
}

Toggler.defaultProps = {
  defaultOnValue: false
}

export default Toggler

在福利方面，由您决定您是否认为这对您的案子来说是值得的。使用而不是基于类的组件没有特别的好处useState，但是如果您想开始使用其他挂钩，或者使用挂钩与第三方库集成，您可能希望在必要时将一些组件转换为功能性组件。

于 2020-02-04T19:22:04.277 回答