javascript - 从 React 组件转换为使用 one hooks

Question

我正在学习 React hooks，并希望将一个相对简单的组件转换为使用 hooks 的组件。该组件称为 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,
};

这是我的钩子(Hook)组件的样子:

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: Objects are not valid as a React child (found: object with keys {children, transitionDuration}). If you meant to render a collection of children, use an array instead.

这里有什么问题吗？

Answer 1

您正在您所在的州设置 props 对象。您需要从 props.children

获取 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);