Серия React Wheel: Компоненты диалога — Идеи диалога

Ставь лайк и смотри, поиск в WeChat【Переезд в мир】Обратите внимание на этого человека, который не имеет большого фабричного прошлого, но имеет восходящий и позитивный настрой. эта статьяGitHub GitHub.com/QQ449245884…Он был включен, статьи были классифицированы, и многие мои документы и учебные материалы были систематизированы.

Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.

Эта статья является второй в серии React Wheels.

• 1. Серия React Wheel: идеи компонентов Icon

Это колесо построено на React + TypeScript + Webpack, а что касается построения окружения, я не буду здесь вдаваться в подробности, просто сделайте это сами. Конечно, вы можете обратиться к моемуисходный код.

Чтобы читать больше качественных статей, пожалуйстаПосетите блог GitHub, Сотни качественных статей ждут вас каждый год!

UI

Диалоговое окно вообще такая штука, нажимаем на кнопку, чтобы всплыло, основные виды этоAlter, Confirmа такжеModal, Модал обычно имеет полупрозрачный черный фон. Конечно, внешний вид может относиться к AntD или Framework и т. д.

Определить API

В плане API вам все же нужно обратиться к своим ровесникам, потому что если однажды, когда кто-то подумает об используемом вами UI фреймворке, ваш API им ранее не использовался, что увеличивает порог вхождения, поэтому API следует сохранить максимально похоже на существующий. .

Помимо предоставления свойств отображения, диалоговое окно также имеет функцию воспроизведения после нажатия для подтверждения, например:

alert('你好').then(fn)
confirm('确定？').then(fn)
modal(组件名)

выполнить

Исходный код диалога загружен наздесь.

dialog/dialog.example.tsx, здесь укажите, жизненный цикл использует новый хук React 16.8, если вы не знакомы с хуком, то можете сначала прочитать егоОфициальная документация сайта.

dialog/dialog.example.tsx

import React, {useState} from 'react'
import Dialog from './dialog'
export default function () {
  const [x, setX] = useState(false)
  return (
    <div>
      <button onClick={() => {setX(!x)}}>点击</button>
      <Dialog visible={x}></Dialog>
    </div>
  )
}

dialog/dialog.tsx

import React from 'react'

interface Props {
  visible: boolean
}

const Dialog: React.FunctionComponent<Props> = (props) => {
  return (
    props.visible ? 
      <div>dialog</div> : 
      null
  )
}

export default Dialog

текущий результат

Показать содержимое

Все еще есть проблема с вышеизложенным, наш диалог жестко запрограммирован в компоненте, мы хотим напрямую передать содержимое, завернутое в компонент, например:

// dialog/dialog.example.tsx
...
<Dialog visible={x}>
  <strong>hi</strong>
</Dialog>
...

Пишите так, это не будет отображаться на страницеhi, ГдеchildrenСвойства пригодны, нам нужно еще больше изменять следующее в диалоговом окне:

// dialog/dialog.tsx
...
return (
    props.visible ? 
      <div>
        {props.children}
      </div>
      : 
      null
)
...

показать маску

Обычно диалоговое окно будет иметь слой маски, обычно мы обычно пишем так:

// dialog/dialog.tsx
...
props.visible ? 
  <div className="fui-dialog-mask">
    <div className="fui-dialog">
    {props.children}
    </div>
  </div>
  : 
  null
...

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

// dialog/dialog.tsx
...
<div>
    <div className="fui-dialog-mask">
    </div>
    <div className="fui-dialog">
      {props.children}
    </div>
 </div>
...

Поскольку React требует только один элемент на самом внешнем уровне, мы используем еще одинdivОберните это, но этот метод незримо большеdiv, чтобы вы могли использовать новые после React 16Fragment, Фрагмент такой же, как шаблон в vue, он не будет отображаться на странице.

import React, {Fragment} from 'react'
import './dialog.scss';
interface Props {
  visible: boolean
}

const Dialog: React.FunctionComponent<Props> = (props) => {
  return (
    props.visible ? 
     <Fragment>
        <div className="fui-dialog-mask">
        </div>
        <div className="fui-dialog">
          {props.children}
        </div>
     </Fragment>
      : 
      null
  )
}

export default Dialog

Полный заголовок, содержание и нижняя часть

Тут особо нечего сказать, сразу к коду

import React, {Fragment} from 'react'
import './dialog.scss';
import {Icon} from '../index'
interface Props {
  visible: boolean
}

const Dialog: React.FunctionComponent<Props> = (props) => {
  return (
    props.visible ? 
      <Fragment>
          <div className="fui-dialog-mask">
          </div>
          <div className="fui-dialog">
            <div className='fui-dialog-close'>
              <Icon name='close'/>
            </div>
            <header className='fui-dialog-header'>提示</header>
            <main className='fui-dialog-main'>
              {props.children}
            </main>
            <footer className='fui-dialog-footer'>
              <button>ok</button>
              <button>cancel</button>
            </footer>
          </div>
      </Fragment>
      : 
      null
  )
}

export default Dialog

Из приведенного выше кода мы можем обнаружить, что когда мы пишем имя стиля, чтобы оно не было перезаписано при третьем использовании, мы настроилиfui-dialogПрефикс, при написании каждого имени стиля, приходится писать заново, что явно неразумно, на случай, если я однажды не использую этот префикс, каждый надо менять заново, поэтому нужен метод для его инкапсуляции.

Мы могли бы написать такой метод:

function scopedClass(name) {
  return `fui-dialog-${name}`
}

Это не может быть написано, потому что наше имя не может быть передано, так что будет еще один-, поэтому требуется дальнейшее суждение:

function scopedClass(name) { return fui-dialog-${name ? '-' + name : ''} }

Есть ли более краткий способ использованияfilterметод:

function scopedClass(name ?: string) {
  return ['fui-dialog', name].filter(Boolean).join('-')
}

Метод вызова следующий: ....