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

Posted 2023-02-22

【中文标题】如何使我的代码成为可重用的组件？

【英文标题】：How to make my code a reusable component?

【发布时间】：2020-01-26 12:58:28

【问题描述】：

下面是我的代码。我想重构它以使其成为可重用的组件，但不知道如何开始。我该怎么做？非常感谢您的回答。 Lorem ipsum dolor sit amet, consectetur adipiscing elit。 Mauris auctor massa nisi、finibus rut​​rum ligula congue 等。 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;

`

【问题讨论】：

通过 props 传递数据，并定义处理程序，如在父项中单击。就是这样。

@tarzenchugh 将您的代码拆分为多个文件，例如将数据从父组件传递到子组件并在子组件内迭代。

【参考方案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
            field= field
        />
    )
  </FormCommitment>
  <AddNew  onChange = handleAdd/>
</Container>

希望这会有所帮助