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

代码如下：

导出默认类拼贴扩展React.Component{
构造函数（）{
超级（）；
此.state={
图像：[
,
],
};
}
图像=（{src}）=>(
evt.target.remove（）}/>
);
render（）{
返回(
{this.state.images}
);
}
}

我只想在渲染所有内容之前，在

.collage

块中生成一个图像列表。如您所见，我尝试在构造函数中创建图像。但这样我会得到一个错误：

元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。

但是，如果我在构造函数中声明

Image

（不使用

this

），一切都正常。这么奇怪的行为

---

您能告诉我，在渲染之前还有其他方法生成数据吗？

您可以使用react lifecycle method

componentWillMount（）

在呈现所有内容之前，它将在.collage块中生成一个图像列表。

我不知道为什么不将

作为单独的组件，因为它不依赖于类上下文中的任何内容，如下所示：

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

const Image=（{src}）=>(
evt.target.remove（）}/>
);
类拼贴扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
图像：[
],
};
}
render（）{
返回(
{this.state.images}
);
}
}

在College.js之外创建图像组件类。还记得在JSX上添加一个“key”属性，它存储在数组中，以帮助更快地运行

Image.js

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

export default Image;

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

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

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

从“React”导入React；
常量图像=（{src}）=>(
evt.target.remove（）}
/>
);
导出默认图像；

College.js

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

export default Image;

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

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

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

从“React”导入React；
从“/Image”导入图像；
导出默认类拼贴扩展React.Component{
构造函数（）{
超级（）；
此.state={
图像：[
]
};
}
render（）{
返回{this.state.images}；；
}
}

App.js

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

export default Image;

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

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

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

从“React”导入React；
导入“/styles.css”；
从“/学院”导入拼贴；
导出默认函数App（）{
返回(
);
}

我不知道您为什么要将组件置于该状态，但这并没有得到优化。我认为最好的办法是这样想：

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

导出默认类拼贴扩展React.Component{
构造函数（）{
超级（）；
此.state={
图像：[
{src:}
],
};
}
图像=（{src}）=>(
evt.target.remove（）}/>
);
render（）{
返回(
{this.state.images.map（this.Image）}
);
}
}

要生成多少图像？在

images

数组中只有一项。

componentWillMount

在ReactJs中已被弃用。