将 React 与条件一起使用

Question

我继承了React UI。 UI 用于填写应用程序，基于下拉列表中的值，我需要显示该下拉列表下方的不同字段，但我被卡住了。

const yes_no_option = [
    "Yes",
    "No",
];
const [application, setField] = React.useState<ProposedInfo>({
    status: ""
});
<Modal 
  <form
    <FormField
    label = {<FormattedMessage id = "Is this an existing application?" />}
    >
      <Dropdown
        placeholder = {intl.formatMessage({ id: "Please select Yes or No"}))
        options = {yes_no_option.map((x: string) => ({label: x, value: x})))
        value = {application.status} 
        onItemSelect = {(e) => e && setField((prev) => ({...prev, status:e.value}))}
      />
   </FormField>
  </form>
</Modal>

我尝试过的是：

    if(application.status == "Yes") (with brackets and without)
        <FormField blah, blah/> (similarly defined to the above field)
    else
        <FormField abc/>

但是上面将所有内容直接打印到 UI。我还尝试定义一个非常简单的函数，因为 React UI 文档有一个我认为可能有用的示例

    function switchFields(){
        const test = 1
        if test == 1:
           return <FormField blah, blah/>
        else:
           return <FormField abc />
    }

当我插入它时，UI 崩溃了。我尝试遵循 React 文档，但无法让它执行我需要的操作。

Answer 1

我发现在调用函数时我做错了什么，我没有像 Sameui 提到的那样在函数周围加上括号。

function switchFields(name: string){
    if name == "Yes":
       return <FormField blah/>
    else:
       return <FormField abc />
}

稍后，在设置应用程序的状态后，我插入了以下内容并得到了所需的结果

<div >
    {switchFields(application.status)}
</div>