從 React 組件轉換為使用一個鈎子

Question

我正在學習 React 鈎子，並希望將一個相對簡單的組件轉換為使用鈎子的組件。 該組件稱為 FadeIn，它包裝子組件以在從父組件傳遞的任何 transitionDuration 中變得可見（使用 CSS 和不透明度）。 以下是我的組件的工作代碼：

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export class FadeIn extends Component {
  constructor(props) {
    super(props);
    this.makeVisible = this.makeVisible.bind(this);
    this.state = { opacity: 0.01 };
  }

  componentDidMount() {
    this.makeVisible();
  }

  makeVisible() {
    this.setState({ opacity: 1 });
  }

  render() {
    const { children, transitionDuration } = this.props;
    const { opacity } = this.state;
    return (
      <div
        style={{
          transition: `opacity ${transitionDuration}ms ease-in`,
          opacity,
        }}
      >
        {children}
      </div>
    );
  }
}


FadeIn.defaultProps = {
  transitionDuration: 600,
};

FadeIn.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node,
  ]).isRequired,
  transitionDuration: PropTypes.number,
};

這是我的鈎子組件的樣子：

import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';

export const FadeIn = (props) => {
  const [opacity, makeVisible] = useState(0.01);
  const [children, setChildren] = useState(props);
  const [transitionDuration, setTransitionDuration] = useState(props);

  useEffect(() => {
    makeVisible(1);
    setChildren(props);
    setTransitionDuration(props);
  }, [props])



  return (
    <div
      style={{
        transition: `opacity ${transitionDuration}ms ease-in`,
        opacity,
      }}
    >
      {children}
    </div>
  );
}
// }


FadeIn.defaultProps = {
  transitionDuration: 600,
};

FadeIn.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node,
  ]).isRequired,
  transitionDuration: PropTypes.number,
};

我安靜了一個與

不變違規：對象作為 React 子級無效（發現：object 帶有鍵 {children, transitionDuration}）。 如果您打算渲染一組子項，請改用數組。

這里有什么問題？

Answer 1

您正在 state 中設置道具 object。 您需要從props.children獲取children數組

setChildren(props);

至

setChildren(props.children);

請記住，這是完全沒有必要的，因為您可以通過訪問props.children來渲染孩子而不將它們保存在 state

return (
    <div
      style={{
        transition: `opacity ${transitionDuration}ms ease-in`,
        opacity,
      }}
    >
      {props.children}

    </div>
);

你也需要改變

setTransitionDuration(props);

至

setTransitionDuration(props.transitionDuration);