以编程方式控制组件的属性

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>
    )