如何使我的代码成为可重用的组件？

Question

下面是我的代码。我想对其进行重构以使其成为可重用的组件，但不知道如何开始。我该怎么做？一个答案是极大的赞赏。 Lorem ipsum dolor坐下，一直保持着安静的状态。 Mauris auctor massa nisi，金龟子ligula congue等。 Nullam quam lacus，fingilla ac elit eu，sulrisque 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这样的组件

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}
        />
    )}
  </FormCommitment>
  <AddNew  onChange = {handleAdd}/>
</Container>

希望这会有所帮助