在React中,如何为这种类型的组件应用componentDidMount?

问题描述 投票:0回答:1

我有一个React 16应用程序。我有一个这样构造的组件...

const AddressInput = (props) => {

  const classes = useStyles();
  const { disabled, error, location, onClear, placeholder, setLocation, showMap, value } = props;

  return (
    <div style={error ? { border: "solid red" } : {}}>

    ...
    </div>
  );
};


export default AddressInput;

我想在组件渲染后执行一些代码。通常我可以使用componentDidMount,但是我不确定在像上面那样构造组件时如何应用它。

reactjs function components render
1个回答
0
投票

由于您使用的是纯功能组件,因此可以使用useEffect钩子(从React v16.8开始):

import React, { useEffect } from "react";

const AddressInput = (props) => {

  const classes = useStyles();
  const { disabled, error, location, onClear, placeholder, setLocation, showMap, value } = props;

  useEffect(() => {
     // your code here
  }, []) // empty array acts like `componentDidMount()` in a functional component
  return (
    <div style={error ? { border: "solid red" } : {}}>

    ...
    </div>
  );
};


export default AddressInput;

您可以在此处阅读有关useEffect的更多信息:https://reactjs.org/docs/hooks-effect.html

© www.soinside.com 2019 - 2024. All rights reserved.