Разделить строку на отдельную строку в соответствии с размером контейнера - PullRequest
Новая
       2

Разделить строку на отдельную строку в соответствии с размером контейнера

0 голосов
/ 24 марта 2020

Я не нашел подходящего решения в старых темах, поэтому ...

Я пытаюсь воспроизвести одну из функций SplitText плагина GSAP ( вот ссылка ).

Я создаю простой веб-сайт Gatsby, чтобы немного узнать о реакции. У меня есть простой компонент, который будет отображаться в нескольких экземплярах внутри индекса. js.

Вот упрощенный код для feature.js

import React, { useState } from 'react'
import classnames from 'classnames/bind'

import styles from '../styles/modules/feature.module.scss'

let cx = classnames.bind(styles)

const Feature = props => {
  const [state] = useState({
    id: props.id,
    subtitle: props.subtitle,
    title: props.title,
    description: props.description,
    content: props.contentPosition,
    image: props.imgPosition,
  })

  return (
    <section className={cx('feature')}>
      <div className={cx('featureContent', `${state.content}`)}>
        <div className={cx('featureContentInner')}>
          <div className={cx('subtitle')}>
            <h5>
              <span>{`${state.id}.`}</span>
              {state.subtitle}
            </h5>
          </div>
          <h1>
            <div className={cx('contentLine')}>
              <div className={cx('contentLineInner')}>Your peace of</div>
            </div>
            <div className={cx('contentLine')}>
              <div className={cx('contentLineInner')}>mind in the</div>
            </div>
            <div className={cx('contentLine')}>
              <div className={cx('contentLineInner')}>heart of Venice.</div>
            </div>
          </h1>
          <p>{state.description}</p>
        </div>
      </div>
      <div className={cx('featureImg', `${state.image}`)}>
        <div className={cx('featureImgInner')}>
          <img />
        </div>
      </div>
    </section>
  )
}

export default Feature

Как видите, я Я держу реквизиты в моем состоянии и помещаю их в мои методы рендеринга.

Единственное, что жестко запрограммировано , это props.title, потому что я беру String и я нужно разбить эту строку на несколько строк. Так как у меня есть несколько экземпляров с разными props.title, длина каждой строки должна вычисляться динамически.

Структура может быть реплицирована каждый раз h1 > div*x > div, но каждый раз может быть различный x.

Я спрашиваю у этой доски, как бы вы справились с этим, или если есть плагин или какой-то скрипт, чтобы сделать это проще, вместо того, чтобы вычислять тонны переменных (getBoundingClientRect split join et c ...).

Или, возможно, единственное решение - заплатить 99 баксов за один выстрел в плагине: P

Спасибо!

1 Ответ

0 голосов
/ 26 марта 2020

Для будущих пользователей:

Установите ссылку: 

let paragraph = useRef(null);

Это будет присвоено тексту, который мы хотели бы пролить: 

<p ref={el => (paragraph = el)}>
  this is a simple paragraph that I'm trying to split
</p>

Далее, мы собираемся установить начальное состояние в зависимости от того, сколько максимальных линий вы ожидаете (не беспокойтесь, если будет меньше строк, как при изменении размера, они будут скрыты): 

const [content, setContent] = useState({
  firstLine: '',
  secondLine: '',
  thirdLine: ''
});

Затем просто выполните разбиение, как только компонент выполнит рендеринг. С функцией массива вы можете go так глубоко, как вы хотите: в моем примере мне нужно содержимое каждой строки. Я скрою сгенерированное разбиение из Splittext. js и вставлю результат каждой строки в мой предварительно отформатированный код. 

useEffect(() => {
  // Split the paragraph into words and lines
  const splittedText = Splitting({ target: paragraph, by: 'lines' });

  // Get an Array of Lines that contains an array of Words
  const lines = splittedText[0].lines.map(line =>
    line.map(word => word.textContent)
  );

  // Get every single lines as an Array of Strings
  const contents = lines.map(line => line.join(' '));

  // Hide the original paragraph
  paragraph.style.display = 'none';

  // Change the content state
  setContent({
    firstLine: contents[0],
    secondLine: contents[1],
    thirdLine: contents[2]
  });
}, []);

Затем просто отрендерим, сколько строк how-nested-you- хочу и с сколько вам нравится классов divs

...