Как выполнить функцию в React?
Я новичок в 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.info( "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.info не работает. Пожалуйста, кто-нибудь может мне помочь.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я заметил две проблемы. Это не реакция. Это 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()
}
удалить <h2> {this.makeGrid()}</h2> из метода рендеринга. Изучите componentDidMountЗдесь Вам не нужно вызывать свой метод в таком рендере. Вы не должны этого делать.
Я ожидаю, что консоль будет готова к печати и отобразить <div className = "boxi"> Success </div>, чтобы он отобразил Success
@MrabetIheb, значит, в этом случае вы делаете это неправильно. Назовите это здесь, в reactjs.org/docs/react-component.html#componentdidmount. Прочтите об этом и, пожалуйста, удалите вызов из вашего метода рендеринга. / Переместите свой h2 в функцию
То, как вы добавляете материал, отличается от способа React. Не используйте jQuery для прямого управления DOM, сделайте это правильно в React.
Вот и решение
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.info( "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;Вам нужно привязать this к методу makeGrid.
@MrabetIheb я заметил, что ваша функция ничего не возвращает. Что еще вы ожидаете отрисовки?