javascript - 从 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,
};

我安静了一个与

Invariant Violation：对象作为 React 子对象无效（发现：带有键 {children，transitionDuration} 的对象）。如果您打算渲染一组子项，请改用数组。

这里有什么问题？

标签： javascriptreactjsreact-hooks

Answer 1

您正在您的状态下设置道具对象。您需要从中获取children数组props.children

setChildren(props);

至

setChildren(props.children);

请记住，这是完全没有必要的，因为您可以通过访问props.children而不将它们保存在状态中来渲染孩子

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

    </div>
);

你也需要改变

setTransitionDuration(props);

至

setTransitionDuration(props.transitionDuration);