Question

我是React的初学者，请有人帮忙我写了这个函数：

import React, {
Component }
from 'react';
import './Grid.css';
import test from "../product.json";
import $ from 'jquery';


class Grid extends Component {

makeGrid = () =>{

    var data = test.map( x => [ x.name, x.price, ] );

    $( document ).ready(function() {
    console.log( "ready!" );
    $('.boxes').append('<div className = "boxi"> Success </div>')

    });

我想执行此功能，所以我尝试了：

render() {


    return (
        <div className = "Grid" >
        < section className = "boxes" >

        < /section> < /div > );

        <h2> {this.makeGrid}</h2>

 }
}

export default Grid;

但即使是console.log也无法正常工作。请有人帮助我。

Answer 1

我注意到两个问题。这不是反应。它是一个javaScript。 this.makeGrid调用您的函数定义，但它不会执行它。要执行它，您需要打开和关闭括号。所以基本上

makeGrid = () =>{

}

和

<h2> {this.makeGrid}</h2>

应该渲染函数字符串。然而。

<h2> {this.makeGrid()}</h2>

应该在JavaScript中执行您的功能。

我怀疑的第二个问题，makeGrid是班级中的一个功能。 this作为班级本身并不一定认可。所以

 <h2> {this.makeGrid.bind(this)}</h2>

可能是正确的事情。

<强>更新

将方法执行移至componentDidMount生命周期的反应。所以加上这个。

componentDidMount() {
  this.makeGrid()
}

从render方法中删除<h2> {this.makeGrid()}</h2>。关于componentDidMount Here的研究您不需要像这样在渲染中调用您的方法。你不应该这样做。

Answer 2

您可以使用解决方案

＆＃13;

import React, { Component } from 'react';
import './Grid.css';
import test from "../product.json";
import $ from 'jquery';


class Grid extends Component {

  constructor(props) {
    this.makeGrid = this.makeGrid.bind(this);
  }
 
  makeGrid = () => {
    var data = test.map( x => [ x.name, x.price, ] );
    console.log( "ready!" );
    $('.boxes').append('<div className = "boxi"> Success </div>')
  }

  render() {
    return (
      <div className="Grid">
        <section className="boxes">
        </section> 
      < /div >
      <h2>
        {this.makeGrid()}
      </h2>
  );     
 }
}

export default Grid;

＆＃13;

您需要将this绑定到makeGrid方法。

如何在React中执行函数？

2 个答案: