В идеале Reactjs допускает одностороннюю привязку данных, то есть передачу реквизитов от родителя к дочернему элементу. Для простоты props — это не что иное, как объекты, которые используются для передачи данных от одного компонента к другому, а компоненты считаются функциями, которые работают изолированно и возвращают JSX.

Наша процедура

  1. Интерфейс приложения npx create-реагировать
  2. В папке src создайте подпапку components.
  3. В подпапке компонентов создайте два файла
  4. Form.js и SubForm.js (можете ли вы отличить родительский элемент от дочернего? )
  5. Добавьте некоторую информацию о стилях в App.css.

Рекомендации

Пожалуйста, рассмотрите возможность использования Redux, если ваше приложение имеет более глубокое дерево компонентов.
Детализация свойств — не лучший способ писать чистые, повторно используемые и СУХОЙ код.

APP.js

import Form from './components/Form';
import './App.css';

function App() {
  return <Form />;
}

export default App;

Form.js "РОДИТЕЛЬ"

Здесь мы передаем ссылку на функцию SaveFormData дочернему компоненту в качестве реквизита.
а. Prop = onRender
б. function = SaveFormData не добавляйте круглые скобки в конце (SaveFormData()). Просто указатель на функцию

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

function Form() {
  const SaveFormData = (receivedData) => { 
   // below is what we get back from our child
    const myObject = {
      ...receivedData,
    };
    console.log(myObject); 
    // The above will display data from child component (not considred best practices )
  };
  return (
    <div className="Form">
      <SubForm onRender={SaveFormData} /> 
       // The above will pass SaveFormData function refrence to SubForm.js
       // As a prop
    </div>
  );
}

export default Form;

SubForm.js ‘CHILD’
Дочерний компонент вызывает родительскую функцию (SaveFormData) для отправки данных родительскому компоненту. Дочерний компонент получает ссылку на родительскую функцию в качестве реквизита. Затем он вызывает функцию с параметрами, которые мы хотим передать родителю.

import React, { useState } from 'react'; 
// State helps us build interactivity as it changes often. Props dont change

function SubForm(props) {
  const [fname, setFname] = useState(''); // set initial state 
  const [lname, setLname] = useState(''); // set initial state 

  const FnameHandler = (e) => {
    setFname(e.target.value);
  //capture the first name typed by a user  (e = event)
  };
  const LnameHandler = (e) => {
    setLname(e.target.value);
//capture the last name typed by a user
  };

  const submitHandler = (event) => {
    event.preventDefault(); //prevent form from reloading 
    const myObjects = { // data objects to be passed on to the parent
      firstName: fname,
      lastname: lname,
      ID: Math.floor(Math.random() * 30) + 1, //generate random ID
    };

    props.onRender(myObjects); // exe the function we got from parent via props
  };

  return (  // JSX Code 
    <div>
      <form onSubmit={submitHandler}> 
      //call submitHandler function when user clicks submit btn

        <label>First name:</label>
        <br />
        <input 
          type="text" id="fname" 
          onChange={FnameHandler} //calfunctiion that will update state
          value={fname} />
        <br />
        <br />
        <label>Last name:</label>
        <br />
        <input 
          type="text" id="lname" 
          onChange={LnameHandler} //calfunctiion that will update state
          value={lname} />
        <br />
        <br />
        <input type="submit" value="Submit" />
      </form>
    </div>
  );
}

export default SubForm;

App.css
Чтобы сделать его немного лучше, вы можете его изменить.

#root {
  background-color: rgba(0, 0, 0, 0.973);
}
.Form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: aliceblue;
}

Вот так теперь выглядит наша форма.

Заключение

«Помните, что props доступны только для чтения и позволяют нам передавать любые данные вниз по нашему дереву компонентов. Однако то, что делает React действительно интерактивным, — это система состояний». (Крис Паркер, 2019 г.)