React.js：在构造函数中使用 class 的组件

Question

这是代码：

export default class Collage extends React.Component {
    constructor() {
        super();
        this.state = {
            images: [
                <this.Image src="" />,
            ],
        };
    }

    Image = ({ src }) => (
        <img className="collage__img" alt="" src={src} onTransitionEnd={evt => evt.target.remove()} />
    );

    render() {
        return (
            <div className="collage">
                {this.state.images}
            </div>
        );
    }
}

我想要的只是在渲染所有内容之前在.collage块中生成一个图像列表。 如您所见，我尝试在构造函数中创建图像。 但是这样我得到一个错误：
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

但是如果我在构造函数中声明Image （不使用this ）一切正常。 这种奇怪的行为。

你能告诉我，有没有另一种方法可以在渲染之前生成数据？

Answer 1

我不知道您为什么不将<Image />作为单独的组件，因为它不依赖于 class 上下文中的任何内容，如下所示：

const Image = ({ src }) => (
  <img className="collage__img" alt="" src={src} onTransitionEnd={evt => evt.target.remove()} />
);

class Collage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        images: [
          <Image src="" />
        ],
    };
  }

  render() {
    return (
        <div className="collage">
          {this.state.images}
        </div>
    );
  }
}

Answer 2

在 College.js 之外创建您的图像组件 class。 还要记住在 JSX 上添加一个“key”属性，它存储在数组中以帮助更快地响应。

代码沙盒

图片.js

import React from "react";
const Image = ({ src }) => (
  <img
    className="collage__img"
    alt=""
    src={src}
    onTransitionEnd={evt => evt.target.remove()}
  />
);

export default Image;

学院.js

import React from "react";
import Image from "./Image";

export default class Collage extends React.Component {
  constructor() {
    super();
    this.state = {
      images: [
        <Image
          key="a356f8ff-0fc4-4c00-afb4-8ce60fcc210e"
          src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1200px-Test-Logo.svg.png"
        />
      ]
    };
  }

  render() {
    return <div className="collage">{this.state.images};</div>;
  }
}

应用程序.js

import React from "react";
import "./styles.css";
import Collage from "./College";

export default function App() {
  return (
    <div className="App">
      <Collage />
    </div>
  );
}

Answer 3

我不知道你为什么要把你的组件放在 state 中，但这没有优化。 我认为最好的方法是这样想：

  export default class Collage extends React.Component {
        constructor() {
            super();
            this.state = {
                images: [
                    {src: ""}
                ],
            };
        }
    
        Image = ({ src }) => (
            <img className="collage__img" alt="" src={src} onTransitionEnd={evt => evt.target.remove()} />
        );
    
        render() {
            return (
                <div className="collage">
                    {this.state.images.map(this.Image)}
                </div>
            );
        }
    }

Answer 4

您可以使用 React 生命周期方法componentWillMount() ，它会在渲染所有内容之前生成 in.collage 块中的图像列表。