以編程方式控制組件的屬性

Question

假設我有一個組件，它的參數來自另一個名為jobData的組件。 該組件可以是一個值或未定義。 如果它有值，我想將它分配給名為defaultValue的 textField 屬性。 如果jobData未定義，我想將它分配給其他東西。 我在我的代碼中嘗試了以下內容，但它沒有用。 有什么/另一種方法可以做到這一點嗎？

import React from 'react'
import {Dialog, TextField} from '@mui/material'

export default function myFunction({jobData}) {
    return(
        <div>
            <form>
                <TextField
                  autoFocus
                  margin="dense"
                  width="100%"
                  id="my_id"
                  label="My ID"
                  type="text"
                  name="myID"
                  defaultValue={if({jobData.length} > 0){
                     {jobData[0]['id']}
                  } else { {jobData.length.toString()} 
                  }
              />
        </form> 
    </div>
    )
 

Answer 1

嘗試使用封裝

import React from 'react'
import {Dialog, TextField} from '@mui/material'

export default function myFunction({jobData}) {
   function isJobDataUndefined(){
     if(jobData.length > 0){
        return jobdata[0]['id']
     }
     return jobData.length.toString()
   }

    return(
        <div>
            <form>
                <TextField
                  autoFocus
                  margin="dense"
                  width="100%"
                  id="my_id"
                  label="My ID"
                  type="text"
                  name="myID"
                  defaultValue={isJobDataUndefined()} 
              />
        </form> 
    </div>
    )