从父组件使用方法

debugcn 发表于 Dev

地亚哥

即使此函数更改了父状态，也可以在子组件中使用父组件中的函数吗？（此函数有一个参数）

我如何将其导出到子组件并使用它？

这是我要导出并在子组件中使用的功能：

function atualizarCadastros(novoCadastro){
setCadastros(cadastrosAtuais => {
  return[...cadastrosAtuais, novoCadastro]
})

}

父组件：

import './App.css';
import React, {useState} from 'react';
import {Table, Jumbotron, Button} from 'react-bootstrap'
import Formulario from './Formulario'
import renderCadastros from './renderCadastros'

function App() {
  
  const [Cadastros, setCadastros] = useState([{
    "id": 1,
    "nome": "Francisca Julia da Costa",
    "cpf": "457.696.936-65",
    "rg": "47.360.897-2",
    "data_nasc": "23/03/1944",
    "sexo": "Feminino"
  },
  {
    "id": 2,
    "nome": "Noah Felipe Silva",
    "cpf": "956.531.431-70",
    "rg": "40.974.782-8",
    "data_nasc": "11/07/1964",
    "sexo": "Masculino"
  },
  {
    "id": 3,
    "nome": "Alícia Rosângela Melo",
    "cpf": "066.291.353-18",
    "rg": "36.214.141-1",
    "data_nasc": "18/02/1978",
    "sexo": "Feminino"
  }]) 
  
  function atualizarCadastros(novoCadastro){
    setCadastros(cadastrosAtuais => {
      return[...cadastrosAtuais, novoCadastro]
    })
  }

  return (
  
  <Jumbotron style={{background: 'transparent'}}> 
    
    <Formulario/>

    <Table striped bordered hover size='sm'>
      <thead>
        <tr>
          <th>id</th>
          <th>Nome</th>
          <th>CPF</th>
          <th>RG</th>
          <th>Nascimento</th>
          <th>Sexo</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {Cadastros.map(renderCadastros)}
      </tbody>
    </Table>

  </Jumbotron>
  
  );
}

export default App;

子组件：

import './App.css';
import React, {useRef} from 'react';
import {Button, Form, Col} from 'react-bootstrap'

function Formulario (){

  return(
    <div>
    <Form>
    <Form.Row>
      <Col>
        <Form.Label>Identificação</Form.Label>
        <Form.Control placeholder="Id" />
      </Col>
      <Col>
        <Form.Label>Nome Completo</Form.Label>
        <Form.Control placeholder="João Silva" />
      </Col>
      <Col>
        <Form.Label>CPF</Form.Label>
        <Form.Control placeholder="000.000.000-00" />
      </Col>
      <Col>
        <Form.Label>RG</Form.Label>
        <Form.Control placeholder="0.000.000" />
      </Col>
      <Col>
        <Form.Label>Data de Nascimento</Form.Label>
        <Form.Control placeholder="DD/MM/AAAA" />
      </Col>
      <Col>
        <Form.Label>Sexo</Form.Label>
        <Form.Control placeholder="Masculino/Feminino" />
      </Col>
    </Form.Row>
    </Form>
    <div  style={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
      <Button style={{margin: '10px'}} variant="primary">Cadastrar</Button>
    </div> 
  </div>
  )  
}

export default Formulario

那就是应用程序中的其他组件，因此您可以看到所有内容：

import './App.css';
import React from 'react';
import {Button} from 'react-bootstrap'

function renderCadastros(cadastro, index){
    return(
    <tr id={cadastro.id} key={index}>
        <td>{cadastro.id}</td>
        <td contentEditable="true" suppressContentEditableWarning={true}>{cadastro.nome}</td>
        <td contentEditable="true" suppressContentEditableWarning={true}>{cadastro.cpf}</td>
        <td contentEditable="true" suppressContentEditableWarning={true}>{cadastro.rg}</td>
        <td contentEditable="true" suppressContentEditableWarning={true}>{cadastro.data_nasc}</td>
        <td contentEditable="true" suppressContentEditableWarning={true}>{cadastro.sexo}</td>
        <td align="center"><Button variant="danger">Excluir</Button></td>
    </tr>)
  }

  export default renderCadastros

凯尔·兰伯特

您可以通过prop将函数传递给子组件，如果函数改变了父组件中定义的状态，则当该状态改变时，React将重新渲染父组件及其所有子组件。

import React from "react";
import "./styles.css";

export default function App() {
  const [counter, setCounter] = React.useState(1);

  const increment = (num) => {
    setCounter(prev => prev + num)
  }

  return (
    <div>
      <div>Counter: {counter}</div>
      <Child increment={increment}/>
    </div>
  );
}

function Child({increment}) {
  handleClick() {
    increment(1)
  }

  return (
    <button onClick={handleClick}>Increment counter</button>
  )
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。