0

Добрый день. Использую React JS. Render компонента. У меня есть динамическая строка:

var string = "#k - #score - #date":

Мы точный порядок не знаем. И предположим что таких "меток" в строке очень большое количество.

У нас есть объект с ключами этих меток и jsx шаблоном соответствующий метке

var template = {
   "#k" : <div>Комадна</div>,
   "#score" : <span>Результат</span>
};

Размер этого объекта всегда равен количеству меток в строке выше.

так вот. Рендер должен возвратить на основе этой строки jsx шаблон . Как это реализовать?

Спасибо

1
  • А вы посмотрите, во что преобразуется JSX, возможно, вам проще формировать сразу результат, чем идти таким окольным путём.
    – user181100
    24 мар 2017 в 13:37

1 ответ 1

-1

Пример работы:

class Example extends React.Component {
    templates = {
        "#k" : <span>Комадна</span>,
        "#score" : <span>Результат</span>
    };

    renderText = (text, regExp, fn) => {
        const parts = text.split(regExp);

        for (let index = 1; index < parts.length; index += 2) {
            parts[index] = fn(parts[index], index);
        }

        return parts;
    };

    matchValue (match) {
        if (match === '') {
            return match;
        }

        if (this.templates.hasOwnProperty(match)) {
            return this.templates[match];
        }

        return match;
    }

    renderNextLine (text) {
        if (!text) {
            return null;
        }

        return this.renderText(text, /(#[a-zA-Z]+)/g, this.matchValue.bind(this))
    }

    render () {
        const string = "#k - #score - #date";

        return <div>
            {this.renderNextLine(string)}
        </div>
    }
}

Расшифровка: Нам нужно разобрать полученную строку регуляркой так, чтобы получить структурированный массив, где определенные элементы этого массива, будут являться ключем к нашему "шаблону".

Разбираем код по регулярке (#[a-zA-Z]+), и получаем такой набор. Далее применяем к каждому нечетному элементу наш рендер-шаблон, в котором ищем совпадение с набором templates. И наконец подменяем.

Я такой подход использовал для draft-js, когда делал кастомный рендер определенных вещей.

5
  • В данном примере на выходе мы утеряем все пробелы и другие символы без # .
    – devn
    27 мар 2017 в 7:02
  • К примеру. Строка "#k - #score - #date" Вернет <div>Комадна</div><span>Результат</span> , а остальные символы будут утеряны
    – devn
    27 мар 2017 в 7:02
  • Хм, ну да, я не понял с начала что вы хотите сделать обычную замену на некоторых "шаблоно-именах". Я делал похожее, если сделаю пример, скину 27 мар 2017 в 9:28
  • @devn проверяйте, должно удовлетворять вашим требованиям) 27 мар 2017 в 9:48
  • Супер спасибо))
    – devn
    27 мар 2017 в 12:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.