如何从 React 中的父级访问子组件中的变量？

Question

我正在尝试通过构建表单/计算器类型的应用程序来学习 React。 我了解到 React 是单向的，我似乎找不到解决这个问题的方法。 我正在尝试制作一个表格，该表格接受有关患者改变护理的输入值，然后计算敏锐度（难度）级别并使用该数字来总计该单位的所有敏锐度，并决定每个班次需要多少员工。

因此，我使用了一个组件来构建每个表格行，以便我可以从 api 创建随机年龄和随机名称，并减少重复性。 然后该组件允许用户选择不断变化的护理级别。 如何将 Patient.js 组件中每一行的敏锐度分数返回给父级 lvl，以便我可以使用它来计算所有患者的累积敏锐度级别？ 在理解状态方面，我非常困惑。 谢谢！

//----------------------Patient.js-------------------------
import React, { useState} from "react";
import FakePatient from "./PtNameGenerator";
import AgeNumber from "./AgeGenerator";

function Patient(props) {
    const [totalAcuity, setTotalAcuity] = useState(0);
    const [assistance, setAssistance ] =useState('');
    const [oriented, setOriented ] =useState('');
    const [incontinent, setIncontinent ] =useState('');
    const [intubated , setIntubated ] =useState('');

    var acuity = 0;

    if (assistance === 'ind') {
        acuity += 1;
    } else if (assistance === 'sba') {
        acuity += 2;
    } else if (assistance === '1pa') {
        acuity += 3;
    } else if (assistance === '2pa') {
        acuity += 4;
    } else {
        acuity = 0;
    }

    if (oriented === "4") {
        acuity += 1;
    } else if (oriented === '3') {
        acuity += 2;
    } else if (oriented === '2') {
        acuity += 3;
    } else if (oriented === '1') {
        acuity += 4;
    } else {
        acuity = 0;
    }

    if (incontinent === "y") {
        acuity += 2;
    } else if (assistance === 'n') {
        acuity += 1;
    } else {
        acuity = 0;
    }

    if (intubated === "y") {
        acuity += 4;
        
    } else if (intubated === 'n') {
        acuity += 1;
    } else {
        acuity = 0;
    };


    return <tr className="Patient-row">
        <td className="Room-number">
            {props.room}
        </td>
        <td>
            <FakePatient />
        </td>
        <td>
            <p><AgeNumber/></p>
        </td>
        <td>
            <select name="assistance" onChange={event => setAssistance(event.target.value) }>
                <option value="na">Select</option>
                <option value="ind">Ind</option>
                <option value="sba">SBA</option>
                <option value="1pa">1PA</option>
                <option value="2pa">2PA</option>
            </select>    
        </td>
        <td>
            <select name="oriented" onChange={event => setOriented(event.target.value) } >
                <option value="4">x4</option>
                <option value="3">x3</option>
                <option value="2">x2</option>
                <option value="1">x1</option>
            </select>    
        </td>
        <td>            
            <select name="incontinent" onChange={event => setIncontinent(event.target.value) }>
                <option value="n">N</option>
                <option value="y">Y</option>
            </select>   
        </td>
        <td>            
            <select name="intubated"  onChange={event => setIntubated(event.target.value) }>
                <option value="n">N</option>
                <option value="y">Y</option>
            </select>   
        </td>
        <td className="Acuity-Score">            
              <p className="AcuityScoreResult">
                { acuity }
            </p>
        </td>
    </tr>;
};

export default Patient;




//----------------------App.js-------------------------
import React, { useEffect, useState } from 'react'
import './css/style.css';
import './css/reset.css';
import logo from "./assets/logo.svg";
import Patient from './Components/Patient';




function App() {

  const [acuity, setacuity] = useState(0);
  const [nurse, setnurse] = useState(0);
  
  /*
  const arr = document.querySelectorAll('.AcuityScoreResult');
  Array.from(arr).forEach(el => {
      let acuityrow = parseInt(el.innerHTML);
      setacuity(prevacuity => prevacuity + acuityrow);
  });
  */
  //when generate clicked
  const renderScoreTotal = () => {
    console.log(nurse);
  }




  return (
    <div className="App">
      <main>
        <section className="Left_col Padding">
          <img className="Center" src={ logo } alt="" />
          <h3>Staffing Matrix</h3>
          <h2>My Units</h2>
          <hr />
          <ul>
            <li className="Active-unit">2N Med/Surg</li>
            <li>4N Behavioral Health</li>
            <li>Emergency Department</li>
            <li>8E Oncology</li>
            <li>7SW Neuro ICU</li>
            <li>8NW Neonatal ICU</li>
          </ul>
          <button className="Logout-btn">Log Out</button>
        </section>
        <section className="Upper_col Padding">
          <div className="Date-container">
            <div className="Day">Thursday,</div>
            <div className="Date">November 2nd 2021</div>
          </div>
          <div>
            <h2 className="Hospital-title">Sedona Medical Center</h2>
            <h3 className="Unit-title Active-unit">Medical Surgical Unit</h3>
          </div>
        </section>
        <section className="Content_container Padding">
          <table>
            <thead>
              <tr>
                <th>Room #</th>
                <th>Name</th>
                <th>Age</th>
                <th>Assistance</th>
                <th>Oriented</th>
                <th>Incontinent</th>
                <th>Intubated</th>
                <th>Acuity Score</th>
              </tr>
            </thead>
            <tbody>
              < Patient room={401} />
              < Patient room={402} />
              < Patient room={403} />
              < Patient room={404} />
              < Patient room={405} />
              < Patient room={406} />
              < Patient room={407} />
              < Patient room={408} />
              < Patient room={409} />
              < Patient room={410} />
              < Patient room={411} />
              < Patient room={412} />
              < Patient room={413} />
              < Patient room={414} />
              < Patient room={415} />
              < Patient room={416} />
            </tbody>
          </table>
          <button onClick={renderScoreTotal} className="Generate-btn">
            Generate
        </button>
          <section className="Staff-ratios">
            <div className="Staff-card">
              <p className="Staff-title">Nurse</p>
              <p className="Staff-number">{ nurse }</p>
            </div>
            <div className="Staff-card">
              <p className="Staff-title">CNA</p>
              <p className="Staff-number">3</p>
            </div>
            <div className="Staff-card">
              <p className="Staff-title">Social Work</p>
              <p className="Staff-number">2</p>
            </div>
            <div className="Staff-card">
              <p className="Staff-title">PT/OT</p>
              <p className="Staff-number">2</p>
            </div>
            <div className="Staff-card">
              <p className="Staff-title">EVS</p>
              <p className="Staff-number">2</p>
            </div>
            <div className="Staff-card">
              <p className="Staff-title">Provider</p>
              <p className="Staff-number">2</p>
            </div>
          </section>
        </section>
      </main>
    </div>
  );
}

export default App;

Answer 1

一种方法是使用值缓存。 您可以使用redux 之类的东西来维护一组可以从任何地方访问的全局变量（值缓存）。 当值发生变化时，React 会自动重新渲染相应的 UI 组件。

更多信息在他们的网站 - https://redux.js.org/introduction/getting-started

但是，如果您的所有组件都在一个页面中，则使用useEffect react hook 会更简单

更多信息在他们的网站 - https://reactjs.org/docs/hooks-reference.html#useeffect

Answer 2

对于这些类型的图书馆，你的口头禅应该是“道具向下，事件向上”。 您将道具传递给孩子并将事件侦听器附加到孩子，以便他们告诉您事情发生了变化。 主机（父）组件然后决定如何处理事件数据。 也许您传递给 Patient 的onAccuityChange侦听器将在它更改时调用。

或者，计算主机中的值并将其传递给子进程。