时间戳

首页 > 解决方案 > 将功能组件转换为类组件

reactjs - 将功能组件转换为类组件

问题描述

我有一个功能组件，但由于我需要使用 now 状态和更复杂的逻辑，我想将它转换为类组件。但我不知道如何让它工作：

我的功能组件：

  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>
      );
    }
  }

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

有任何想法吗？

标签： reactjs

解决方案

在您的渲染功能中

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 无关。而且你不应该重新分配一个 props 元素，即使它是用let. 您可能会使用以下内容：

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

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

推荐阅读