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 you have read our privacy policy.

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