组件的二次封装

在React中，使用扩展运算符（...）来传递props的作用是将一个对象的所有可枚举属性（包括自身的和继承的）复制到新创建的对象中。当我们在二次封装组件时使用它，可以方便地将所有传递给我们的props传递给基础组件。

假设我们有一个基础的Button组件，我们想要创建一个更复杂的自定义按钮组件，该组件除了具有基础按钮的所有功能外，还具有一些额外的功能，如显示模态框等。在这种情况下，我们可以使用扩展运算符将所有传递给我们的props传递给基础按钮组件。

这是一个例子：

import React from 'react';
import { Button } from 'antd';

const CustomButton = (props) => {
  // 使用扩展运算符传递所有的props给基础按钮组件
  return <Button {...props}>Custom Button</Button>;
};

export default CustomButton;

在这个例子中，我们创建了一个名为CustomButton的组件，它接受任意数量和类型的props。然后，我们将这些props通过扩展运算符传递给基础按钮组件。这意味着CustomButton将具有与基础按钮组件完全相同的API，但还可以添加更多的功能或样式。

那么如何使用这个二次封装的组件呢？你只需要像使用任何其他React组件一样使用它，传入你需要的props即可。例如：

import React from 'react';
import CustomButton from './CustomButton';

function App() {
  return (
    <div>
      <CustomButton type="primary" onClick={() => console.log('Clicked')}>
        Click me!
      </CustomButton>
    </div>
  );
}

export default App;

在这个例子中，我们创建了一个CustomButton实例，并传递了type和onClick两个props。因为CustomButton内部使用了扩展运算符，所以这些props会被传递给基础的Button组件。因此，这个CustomButton看起来和行为都像一个普通的Button组件，但它还可以根据需要添加额外的功能。

2024.2.26,有那感觉了

import { forwardRef, useRef } from 'react';

const MyInput = forwardRef((props, ref) => {
    console.log(props, ref)
    const changeData = (e) => {
        // console.log(e.target.value);
        console.log(props, ref, children, value)
    }
    return <input ref={ref} onChange={changeData} />;
});

export default function Form() {
    const inputRef = useRef(null);

    function handleClick() {
        console.log(inputRef.current, '---------');
        inputRef.current.focus();
    }

    return (
        <>
            <MyInput ref={inputRef} age={12} value={'pppp'} style={{ color: 'red' }} >
                <div>000</div>
            </MyInput>
            <button onClick={handleClick} >
                聚焦输入框
            </button>
        </>
    );
}