Как переопределить функцию render в React?

143
12 декабря 2019, 05:30
define('chart', ['l/graph'], function (Graph) {
    ...
    return React.createClass({
        displayName: 'Chart',
        render: function() {
            ...
        }
    });
});

Данный код создаёт React компонент Chart. Подскажите как можно было бы переопределить метод render этого компонента при помощи JS?

P.S.: В JS не разбираюсь, прошу помочь.

Answer 1

Предположим, что имеется такой класс:

const Chart = React.createClass({
  displayName: 'Chart',
  render: function() {
    return (<div>Old render!</div>);
  }
});

Можно подменить функцию рендеринга через прототипирование, вот так:

Chart.type.prototype.render = function() {
  return <div>New render!</div>;
};

Пытаться подменить метод рендеринга для компонента считается злым хаком и не считается бэст практис. Полный пример кода:

import React from "react";
const Chart = React.createClass({
  displayName: "Chart",
  render: function() {
    return <div>Old render!</div>;
  }
});
Chart.type.prototype.render = function() {
  return <div>New render!</div>;
};
React.render(<Chart />, document.getElementById("app"));

В результате будет выведено:

New render!

Создание компонентов через createClass считается устаревшим подходом. Советую смотреть в сторону новой версии React.

READ ALSO
Передача состояниа checkbox с ajax

Передача состояниа checkbox с ajax

Всем доброго дня суток из ajax в пчп обработчик передаю дааные методом: var selectval_1 = $("select_1 option:selected")

100
Как добавить класс блоку в зависимости от комбинации радиокнопок?

Как добавить класс блоку в зависимости от комбинации радиокнопок?

Всем приветЕсть два блока радиокнопок в каждом по 3 кнопки (Первый: 1 человек, 2 человека, Семья

142
маска для ввода номера телефона чистый javascript

маска для ввода номера телефона чистый javascript

помогите написать маску такого формата +7 (999) 999-99-99 без стороних библиотек

123
найти навешенный обработчик

найти навешенный обработчик

Имеем элемент с навешенным на нём обработчиком $(el)on('click', function() {/* содержимое анонимной функции */}), как найти этот обработчик в мозиле event не указывает...

134