Ερώτηση για extend of 3rd party component σε React JS

[skiabox]

Καλημέρα στους φίλους insomniacs.

Ένας εξωτερικός συνεργάτης που έχουμε στη δουλειά αντί να χρησιμοποιεί κατευθείαν το 3rd party component, που στη συγκεκριμένη περίπτωση είναι ένα antd component, έχει κάνει όλα σχεδόν τα antd component που χρησιμοποιούμε ξεχωριστά extended components και χρησιμοποιεί αυτά.

Ποιο είναι το όφελος αυτής της κίνησης και τι κερδίζουμε;

Οριστε και ο κώδικας.

import React from 'react';
import { Checkbox } from 'antd';
import PropTypes from 'prop-types';

const CustomCheckbox = ({ label, ...rest }) => {
  return (
    <div className="custom-checkbox">
      <Checkbox {...rest}>{label}</Checkbox>
    </div>
  );
};

CustomCheckbox.propTypes = {
  label: PropTypes.string.isRequired,
};

export default CustomCheckbox;

 

[ghostaki]

Μήπως ο συνεργάτης λέγεται Ian; 😄

Πιστεύω ότι ο βασικός λόγος που γίνεται αυτό το pattern είναι για ευκολία και για να σε καθοδηγεί να χρησιμοποιείς το imported component με συγκεκριμένο τρόπο. Στο παράδειγμά σου, έχει τυλίξει το Checkbox με ένα div, έχει πάρει και το label από τα prop και το χρησιμοποιεί και έχει βάλει και μια συγκεκριμένη κλάση. Έτσι, αντί κάθε φορά να έχεις να κάνεις το ίδιο όπου θες ένα Checkbox, χρησιμοποιείς το CustomCheckbox.

[XPHSTOS_]

Στο παράδειγμα που μας δείχνεις δεν έχει κανένα απολύτως νόημα.
Αν όμως είχαμε ένα popup / tooltip / modal component το οποίο θέλαμε να επαναχρησιμοποιούμε με κάποια setαρισμένα defaults ή μέσα σε wrapped markup τότε θα είχε νόημα.
Αυτό έτσι όπως το βλέπω μάλλον παραξενιά ή στην χειρότερη το "έμαθε" έτσι και το κάνει τυφλοσούρτι.

[t(o.ot)]

Μάλλον το κάνει ώστε αν αποφασίσει κάποια στιγμή να αλλάξει βιβλιοθήκη να μπορεί να αλλάξει μόνο τα wrappers και ο υπόλοιπος κώδικάς του να δουλέψει χωρίς να χρειαστεί να αλλάξει όλες τις φόρμες του. Χρήσιμο ιδίως όταν πολλά popular javascript libraries γίνονται deprecated προς χάριν της καινούργιας γυαλιστερής βιβλιοθήκης.