1

Quero criar componentes com o TextInput, sendo que o padrão é o meu componente de Input sem máscara, e os filhos terão máscara ou alguma outra tratativa.

Tenho atualmente o Input padrão que contém apenas os estilos e retornam o texto cru ao digitar. Também tenho um Input com máscara de CPF / CNPJ, e na hora de exportar estou usando um arquivo index.js que apenas contém esses dois componentes e os exporta.

index.js

import Input from './Input'
import CpfCnpj from './input-masks/InputCpfCnpj'

export { CpfCnpj }

export default Input

Porém gostaria de utilizar dessa forma quando quiser usar sem máscaras:

<Input {...this.props} />

E assim quando precisar de alguma máscara:

<Input.CpfCnpj {...this.props} />

Uma maneira que encontrei foi fazer isso no arquivo index.js

import Input from './Input'
import CpfCnpj from './input-masks/InputCpfCnpj'

Input.CpfCnpj = CpfCnpj

export default Input

Gostaria de saber se existe outra forma, e se essa é uma boa prática?

1 Resposta 1

1

Há duas formas que conheço de um componente "herdar" as propriedades de outro, que é estendo ou colocando dentro de outro.

HERANÇA

Componente "pai":

import React from 'react';

class GenericForm extends React.Component {
  constructor(props) {
    super(props);

    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  onChange = e => {
    const target = e.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    this.setState({
      dataForm: { ...this.state.dataForm, [e.target.name]: value}
    });
  }
}
export default GenericForm;

Componente filho:

class FormLogin extends GenericForm {
  constructor(props) {
    super(props);

    this.state = {
      data: {
        login: '',
        password: ''
      },
      loading: false,
      errors: {}
    };
  }
}

COMPONENTE DENTRO DE COMPONENTE

Tabela genérica (apenas estilo)

class Table extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <table className={`${this.props.className} Table`}>
        {this.props.children}
      </table>
    )
  }
}

Tabela Específica: aqui pode ser adicionado mais estilos, métodos e outros

class TableList extends Component {
  constructor(props) {
    super(props);
  }

  open() {
    // do something
  }

  render() {
    return (
      <Table className={`${this.props.className} TableList` onClick={this.open}}>
        {this.props.children}
      </Table>
    )
  }
}

Assim, quando eu renderizar "TableList" renderizarei também "Table".

<TableList className="alunos-disponiveis">
  <tr>
    <th>Nome</th>
    <th>Endereço de Partida</th>
    <th>Endereço de Regresso</th>
  </tr>
  {
    data.passengerList.map(item => (
      <tr>
        <td>{item.name}</td>
        <td>{item.localeStart.address}</td>
        <td>{item.localeFinish.address}</td>
      </tr>
    ))
  }
</TableList>
1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .