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

Question

Ниже мой код.Я хотел реорганизовать это, чтобы сделать его повторно используемым компонентом, но не знаю с чего начать.Как я могу это сделать?Ответ с благодарностью.Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit.Mauris auctor massa nisi, finibus rutrum ligula congue et.Nullam quam lacus, fringilla ac elit eu, scelerisque vulputate massa.

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import './styles.css';

const Commitment = () => {

    const [ fields, setFields ] = useState([{ value: "" }]);

    function handleChange(key, event) {
        const values = [...fields];
        values[key].value = event.target.value;
        setFields(values);
    }


    function handleAdd() {
        const values = [...fields];
        values.push({ value: "" });
        setFields(values);
    }

    function handleRemove(key) {
        const values = [...fields];
        values.splice(key, 1)
        setFields(values);
    }

    return (
        <div className="container">
            <div className="row">
                <div className="col-md-12 col-page">
                    <h1 className="page-heading">Create Your KLC</h1> 
                    <p>Make a commitment about something that you will commit to working on in this area:</p>
                </div>
                <div className="col-md-12"> 
                    <form id="form-commitment">
                        <div className="form-group">
                            <p className="form-label">My Commitment <i className="icon-help"></i></p>                       
                        </div>                      
                        {
                            fields.map((field, i) => {
                                return (
                                    <div key={`${field}-${i}`} className="form-group text-dynamic-inputs">
                                        <i className="icon-dynamic-inputs-counter">{i + 1}</i>
                                        <input 
                                            type="text" 
                                            className="form-control" 
                                            value={field.value}
                                            placeholder="Enter the text"
                                            onChange={e => handleChange(i, e)}
                                        />
                                        <button type="button" className="btn-remove" style={{ display: i === 0 && "none"}} onClick={() => handleRemove(i)}>
                                        </button>   
                                    </div>
                                );
                            })
                        }                                                                                       
                    </form>
                    <i className="icon-add-new"></i><Link to="#" onClick={() => handleAdd()} className="link-add-new">Add new</Link>  
                </div>
            </div>
        </div>                  
    )
}

export default Commitment;

`

Answer 1

Позволяет сначала разбить ваш гигантский компонент на более мелкие немые компоненты.

Глядя на ваш код, выглядит как page-heading, form-commitment, внутри формы fields выглядит как компонент дампа иicon-add-new также может быть компонентом дампа, поэтому давайте сначала разделим их и переместим код в соответствующие компоненты.

PageHeading

export const PageHeading= props => (
<div className="col-md-12 col-page">
    <h1 className="page-heading">Create Your KLC</h1> 
    <p>Make a commitment about something that you will commit to working on in this 
   area:</p>
  </div>
 );

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

export const FormCommitment = props => (
<div className="col-md-12">
<form id="form-commitment">
  <div className="form-group">
    <p className="form-label">
      My Commitment <i className="icon-help"></i>
    </p>

    {props.children()}
  </div>
</form>

);

и Field компонента какthis

export const Field = props => (
<div className="form-group text-dynamic-inputs">
<i className="icon-dynamic-inputs-counter">{i + 1}</i>
<input
  type="text"
  className="form-control"
  value={props.field.value}
  placeholder="Enter the text"
  onChange={e => props.handleChange(i, e)}
/>
<button
  type="button"
  className="btn-remove"
  style={{ display: props.index === 0 && "none" }}
  onClick={() => props.handleRemove(i)}
   ></button>
  </div>
 );

Теперь появился интеллектуальный компонент, который выглядит следующим образом после рефакторинга

<Container>
<PageHeading />
<FormCommitment>
    {fields.map(field, index) => (
        <FormField 
            onChange= {handleChange} 
            onRemove= {handleRemove}  
            key={`${field}-${index}`} 
            index= {index}
            field= {field}
        />
    )}
  </FormCommitment>
  <AddNew  onChange = {handleAdd}/>
</Container>

Надеюсь, это будет полезно