使用 ReactJS 创建 meme 生成器

在本教程中，我们将使用 ReactJS 制作一个 meme 生成器。在 meme 生成器中，我们有两个文本字段，我们在其中输入第一个文本 和最后的文字。当我们点击Gen按钮写下文本后，它会创建一个带有图像和写在上面的文本的 meme。

在这个 React 应用程序中，我们只有一个组件：MemeGenerator。 MemeGenerator 包含一个返回受控表单的渲染方法，该表单包含两个输入字段和一个Gen按钮。当 MemeGenerator 组件在屏幕上呈现时，componentDidMount() 方法被激活并进行 API 调用，并将接收到的数据存储在一个数组中。当用户填写输入字段并单击Gen按钮时，表单被提交，并且随机图像 URL 被分配给randomImg状态变量。图像与文本一起显示在屏幕上。

先决条件：本项目的先决条件是：

• 反应
• 功能和类组件
• 反应 AJAX 和 API
• ES6  

React 入门：我们的 React 应用程序包含两个组件，App 组件和 MemeGenerator 组件。

索引.js：

Javascript

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
 
ReactDOM.render(, document.getElementById('root'))

App.js ：App 组件呈现单个 MemeGenerator 组件。

Javascript

import React from 'react';
import MemeGenerator from './MemeGenerator'
 
function App() {
    return (
        

            
        
    );
}
 
export default App;

MemeGenerator.js：我们 App 中唯一的组件是 MemeGenerator 组件。它包含四个状态变量，最初，它们都设置为空字符串或空数组。当组件安装在屏幕上时，会进行 API 调用，并将接收到的数据转换为 JSON 并存储在状态变量allMemeImgs[]中。 MemeGenerator 组件将受控表单呈现到屏幕上，当用户键入输入时，将调用handleChange方法，状态变量topText和bottomText存储用户键入的文本。当用户单击Gen按钮时，将调用handleSubmit方法并将随机图像 URL 存储在randomImg变量中。当randomImg获得值时，meme 将显示在屏幕上。

下面是我们的 MemeGenerator 组件的完整代码。

Javascript

// Import React (Mandatory Step).
import React from "react";
 
// MemeGenerator component to generate a meme
class MemeGenerator extends React.Component {
  state = {
    topText: "",
    bottomText: "",
    allMemeImgs: [],
    randomImg: ""
  };
 
  // componentDidMount() method to fetch
  // images from the API
  componentDidMount() {
     
    // Fetching data from the API
    fetch("https://api.imgflip.com/get_memes")
      // Converting the promise received into JSON
      .then(response => response.json())
      .then(content =>
          // Updating state variables
        this.setState({
          allMemeImgs: content.data.memes
        })
      );
  }
 
  // Method to change the value of input fields
  handleChange = event => {
    // Destructuring the event. target object
    const { name, value } = event.target;
     
    // Updating the state variable
    this.setState({
      [name]: value
    });
  };
 
  // Method to submit from and create meme
  handleSubmit = event => {
    event.preventDefault();
    const { allMemeImgs } = this.state;
    const rand =
      allMemeImgs[Math.floor(Math.random()
      * allMemeImgs.length)].url;
    this.setState({
      randomImg: rand
    });
  };
 
  render() {
    return (
      

        // Controlled form
        

          // Input field to get First text
          
          // Input field to get Lsst text
          
          // Button to generate meme
          Generate
        
 
        

        

          // Only show the below elements when the image is ready to be displayed
          {this.state.randomImg === "" ? "" :
            }
          {this.state.randomImg === "" ? "" :
            
{this.state.topText}
}
          {this.state.randomImg === "" ? "" :
            
{this.state.bottomText}
}
        
      
    );
  }
}
 
export default MemeGenerator;

App.css：如何使 topText 和 lastText 根据图像对齐。以下 CSS 可用于使文本对齐。

CSS

.meme {
  position: relative;
  width: 59%;
  margin: auto;
}
 
.meme > img {
  width: 100%;
}
 
.meme > h2 {
  position: absolute;
  width: 80%;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  margin: 15px 0;
  padding: 0 5px;
  font-family: impact, sans-serif;
  font-size: 1em;
  text-transform: uppercase;
  color: white;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 #000;
}
 
.meme > .bottom {
  bottom: 0;
}
 
.meme > .top {
  top: 0;
}
 
form {
  padding-top: 25px;
  text-align: center;
}

输出：我们的应用程序现在已经完成并且可以运行了。下面是完美运行的应用程序。