С использованием componentWillMount:
import React, { Component } from "react";
var listOfImages = [];
class App extends Component {
importAll(r) {
return r.keys().map(r);
}
componentWillMount() {
listOfImages = this.importAll(
require.context("../images/", false, /\.(png|jpe?g)$/)
);
}
render() {
return (
<>
{listOfImages.map((image, index) => (
<a className="gallery-item" key={index} href={image}>
<img src={image} className="thumb" alt="Some"></img>
</a>
))}
</>
);
}
}
export default App;
Однако, если беспокоит варнинг в консоли примерно такого содержания - componentWillMount is deprecated and will be removed in the next major version. Use componentDidMount instead. As a temporary workaround, you can rename to UNSAFE_componentWillMount - волей-неволей придется предпринять какие-то действия. К воркараунду обращаться не станем, попросту перепишем код, используя componentDidMount. Как, собственно, нам и предложено:
import React, { Component } from "react";
class App extends Component {
constructor(props) {
super(props);
this.state = { listOfImages: [] };
}
importAll(r) {
return r.keys().map(r);
}
componentDidMount() {
const list = this.importAll(
require.context("../images/", false, /\.(png|jpe?g)$/)
);
this.setState({
listOfImages: list,
});
}
render() {
return (
<>
{this.state.listOfImages.map((image, index) => (
<a className="gallery-item" key={index} href={image}>
<img src={image} className="thumb" alt="Some"></img>
</a>
))}
</>
);
}
}
export default App;
Полную версию кода, как и всегда, можно глянуть (там же и ссылка на демку) в гитхабе автора, репозиторий носит название react-lightgallery. Удачи, happy coding.
Комментарии в блоге