如何將組件作為道具傳遞并有條件地渲染它？

我這里有一個組件，它獲取一個 ID 號并檢查該 ID 號是否存在于資料庫中。如果它存在，它應該呈現一個組件，如果不存在則顯示錯誤訊息。掙扎于我應該如何寫它，任何幫助表示贊賞。

function PatientIDInput({component}) {
  const [patientID, setPatientID] = useState('');
  const [errorMessage, setErrorMessage] = useState('');
  const [showComponent, setShowComponent] = useState(false);
  const [patientInformation, setPatientInformation] = useState('');

  const handleChange = (e) => {
    // some input change handling
  }

  const handleSubmit = (e) => {
    e.preventDefault();

    Physician.fetchPatientData(patientID)
      .then(res => {
        if (res.status === 200) {
            // show component if patient exists
        }
      })
      .catch(error => {
        if (error.response.status) {
          // set error if not
        }
      })
  }

  return (
    <>
    <form onSubmit={handleSubmit}>
               // some UI code for user's input
    </form>

    { showComponent 
      ? {Component patientInformation={patientInformation}} />  // this is where I'm 
                   struggling with the syntax. How should I write the logic? I want to pass
                   some props to the component too.
      : null}
    </>
  );
}

export default PatientIDInput;

uj5u.com熱心網友回復：

以下是我最常使用的一些模式。

傳遞一個“反應組件”

function PatientIDInput({Component}) {
  // skip
  return (
    <>
    <form onSubmit={handleSubmit}>
               // some UI code for user's input
    </form>

    { showComponent 
      ? <Component patientInformation={patientInformation} />
      : null}
    </>
  );
}

export default PatientIDInput;

const Sample = ({ patientInformation }) => <div>{patientInformation}</div>
<PatientIDInput Component={Sample} />

作為孩子傳遞“渲染函式”

function PatientIDInput({children}) {
  // skip
  return (
    <>
    <form onSubmit={handleSubmit}>
               // some UI code for user's input
    </form>

    { showComponent 
      ? children({ patientInformation  })
      : null}
    </>
  );
}

export default PatientIDInput;

const Sample = ({ patientInformation }) => <div>{patientInformation}</div>
<PatientIDInput>
  {({ patientInformation }) => <Sample patientInformation ={patientInformation} />}
</PatientIDInput>

作為孩子傳遞“反應元素”

function PatientIDInput({children}) {
  // skip
  return (
    <>
    <form onSubmit={handleSubmit}>
               // some UI code for user's input
    </form>

    { showComponent 
      ? React.cloneElement(children, { patientInformation  })
      : null}
    </>
  );
}

export default PatientIDInput;

const Sample = ({ patientInformation }) => <div>{patientInformation}</div>
<PatientIDInput>
  <Sample/>
</PatientIDInput>

uj5u.com熱心網友回復：

您可以使用

React.cloneElement(
  element,
  [config],
  [...children]
)

使用 element 作為起點克隆并回傳一個新的 React 元素。config 應該包含所有新的 props、key 或 ref。生成的元素將具有原始元素的 props，新的 props 淺合并。新的孩子將取代現有的孩子。如果配置中不存在 key 和 ref，則原始元素中的 key 和 ref 將被保留。

例子

import React from "react";

function Child(props) {
  return <div>{props.name}</div>;
}

function SomeOtherComponent(props) {
  return (
    <>
      {React.cloneElement(props.component, {
        someFunction: () => {
          console.log("inside callback");
        },
        name: "Ganesh",
      })}
    </>
  );
}

function App() {
  return (
    <div>
      Hi
      <SomeOtherComponent component={<Child />}></SomeOtherComponent>
    </div>
  );
}

uj5u.com熱心網友回復：

不是將組件作為道具傳遞，而是直接在 PatientIdInput 組件中匯入組件，并將患者資訊作為道具傳遞給它，如下所示：

**Import your Component Here**

function PatientIDInput({component}) {
  const [patientID, setPatientID] = useState('');
  const [errorMessage, setErrorMessage] = useState('');
  const [showComponent, setShowComponent] = useState(false);
  const [patientInformation, setPatientInformation] = useState('');

在回傳部分：

 return (
   <>
    <form onSubmit={handleSubmit}>
           // some UI code for user's input
    </form>

  { showComponent 
    ? <ImportedComponent patientInformation={patientInformation}/>
  : null}
</>
  );
}

export default PatientIDInput;

標籤：javascript 反应 前端 反应组件 网络前端

上一篇：當滑鼠懸停在父元素上時撰寫一個程式來將子元素添加到相應的父元素

下一篇：無法讀取null的屬性（讀取“用戶”）