Question

我只有一个功能组件，但是由于我现在需要使用状态和更复杂的逻辑，因此我想将其转换为类组件。但我不知道该如何工作：

我的功能组件：

  import React from 'react';

  const FileList = (props) => {
    const items = props.items.map((item) => {
      return <p key={item.reqId} > { item.name }</ p>
    });

    return <div>{items}</div>
  }

我试图这样做：

  export default class FileL extends React.Component {
    constructor(props) {
      super(props)
    }

    render() {
      const { items } = this.props;
      items = props.items.map((item) => {
        return <p key={item.reqId} > {item.name}</ p>
      });
      return (
        <div>{items}</div>
      );
    }
  }

但是这不起作用。它说“项目”是只读的。我想保留相同的功能。

有什么想法吗？

Answer 1

在渲染功能中

render() {
      const { items } = this.props;
      items = props.items.map((item) => {
        return <p key={item.reqId} > {item.name}</ p>
      });
      return (
        <div>{items}</div>
      );
    }

items是const，因此您无法覆盖它。这与React无关。而且，即使使用let定义了props元素，也不应重新分配它。您可以使用以下内容：

render() {
      const { items } = this.props;

      return (
        <div>
        {
          items.map((item) => <p key={item.reqId} > {item.name}</ p>)
        }
        </div>
      );
    }

Answer 2

您可以尝试一下，

export default class FileL extends React.Component {
    constructor(props) {
      super(props);
    }

    render() {
      return (
        <div>
          {
             this.props.items.map((item) => {
                 return <p key={item.reqId} > {item.name}</ p>
             })
          }
        </div>
      );
    }
  }

实际上，您不需要将组件转换为基于类的组件，因为Hooks附带了React 16.8。使用Hooks可以完成基于类的组件的所有操作。它们使您无需编写类即可使用状态和其他React功能。

将功能组件转换为类组件

2 个答案: