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

Question

Сверстал окно, но нужно наверное разбить все на компоненты. Как правильно все это разделить + структура? У меня так же есть другое окно и там тоже есть title, но размер текста другой. Не могу понять как правильно и лучше это сделать. Этот компонент лежит тут: /src/components/Authentication/index.jsx

const Authentication = () => {
    const [code, setCode] = useState(null);
    const [isCopied, setIsCopied] = useState(false);

    const handleCopy = () => {
        if (isCopied) return;

        navigator.clipboard.writeText(code);
        setIsCopied(prev => !prev);

        setTimeout(() => setIsCopied(prev => !prev), 2000);
    }

    return (
        <React.Fragment>
            <div className="_container">
                <div className="text-info">
                    <h1 className="title">Title</h1>
                    <h2 className="subtitle">Subtitle</h2>
                </div>
                <ul className="steps">
                    <li className="step">
                        <div className="icon">
                            {/* svg */}
                        </div>
                        <span className="text">Text</span>
                    </li>
                    <li className="step">
                        <div className="icon">
                            {/* svg */}
                        </div>
                        <span className="text">Text</span>
                    </li>
                    <li className="step">
                        <div className="icon">
                            {/* svg */}
                        </div>
                        <span className="text">Text</span>
                    </li>
                </ul>
                <div id="qrcode" className="qrcode">
                    {/* img */}
                </div>
                <div className="qrcode-box">
                    <div className="qrcode-box-name">Text</div>
                    <div className="qrcode-key">
                        <span>{code}</span>
                        <button onClick={handleCopy} className="copy">
                            {isCopied ? (
                                {/* svg */}
                            ) : (
                                {/* svg */}
                            )}
                        </button>
                    </div>
                </div>
            </div>
        </React.Fragment>
    )
}

Answer 1

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

У каждого компонента должен быть свой смысл. Могу предложить такое разбиение.

По стейту - нужно понимать что потом ты собираешься делать. Возможно часть стейта перейдет из родителя в свой компонент.

const TextInfo = () => {
  return <div className="text-info">
      <h1 className="title">Title</h1>
      <h2 className="subtitle">Subtitle</h2>
  </div>
}
const Step = (props) => {
  const {svg, text} = props
  return <li className="step">
      <div className="icon">
          {svg}
      </div>
      <span className="text">{text}</span>
  </li>
}
const Steps = ({arr}) => {
  return <ul className="steps">
    {arr.map(o => <Step key={o.svg} {...o} />)}
  </ul>
}
const QrCode = (props) => {
  const {
    code,
    handleCopy,
    isCopied
  } = props
  return <React.Fragment>
    <div id="qrcode" className="qrcode">
        {/* img */}
    </div>
    <div className="qrcode-box">
        <div className="qrcode-box-name">Text</div>
        <div className="qrcode-key">
            <span>{code}</span>
            <button onClick={handleCopy} className="copy">
                {isCopied ? 'svg1' : 'svg2'}
            </button>
        </div>
    </div>
  </React.Fragment>
}
const Authentication = () => {
  const [code, setCode] = React.useState(null);
  const [isCopied, setIsCopied] = React.useState(false);
  const handleCopy = () => {
      if (isCopied) return;
      //navigator.clipboard.writeText(code);
      setIsCopied(prev => !prev);
      setTimeout(() => setIsCopied(prev => !prev), 2000);
  }
  const obj = {
    code,
    handleCopy,
    isCopied
  }
  return <div className="_container">
    <TextInfo />
    <Steps arr={data()} />
    <QrCode {...obj} />
  </div>
}
//
function data() {
  return [
    {svg: 'svg 1', text: 'Text 1'},
    {svg: 'svg 2', text: 'Text 2'},
    {svg: 'svg 3', text: 'Text 3'},
  ]
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<Authentication />);

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>

БЛОГ НА HUSL

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

Ответы (1 шт):