如何根据Prop的reasonId值控制TextField的required属性

嘿，我懂你要搞定的需求了：你现在的代码只有当props.selectedReason.reasonId === 2时才会渲染TextField，但你想要的是不管reasonId是什么，这个输入框都要显示，只是当reasonId等于2时设为必填状态，其他数值时是非必填状态。

下面给你几种简单的实现方式，按需选择：

1. 直接给required属性绑定条件判断（最简洁推荐） #

这是最直接的写法，React的组件属性可以直接接收布尔值表达式，我们只需要把required的值设为props.selectedReason.reasonId === 2就可以了，这样不管reasonId是什么，组件都会渲染，必填状态自动切换：

<div className='row'>
  <div className='col-xs-12'>
    <TextField 
      required={props.selectedReason.reasonId === 2}
      multiline 
      className='text-area' 
      fullWidth 
      value={props.selectedReason.reason} 
      onChange={event => { 
        props.handleChangeReason({ 
          ...props.selectedReason, 
          reason: event.target.value 
        }); 
      }} 
    />
  </div>
</div>

2. 用三元运算符（适合后续有更多属性差异的情况） #

如果以后你需要根据reasonId修改更多属性（比如占位符、样式），可以用三元运算符来做区分，核心还是给required绑定条件：

<div className='row'>
  <div className='col-xs-12'>
    <TextField 
      required={props.selectedReason.reasonId === 2}
      multiline 
      className='text-area' 
      fullWidth 
      value={props.selectedReason.reason} 
      onChange={event => { 
        props.handleChangeReason({ 
          ...props.selectedReason, 
          reason: event.target.value 
        }); 
      }}
      placeholder={props.selectedReason.reasonId === 2 ? '请填写必填原因' : '请填写原因'}
    />
  </div>
</div>

3. 提取为单独函数（适合复杂逻辑场景） #

如果后续这个输入框的渲染逻辑变得复杂，你可以把它提取成一个单独的函数，用if语句处理条件（其实这里核心还是设置required的值，和第一种思路一致）：

// 先定义渲染函数
const renderReasonInput = () => {
  const isRequired = props.selectedReason.reasonId === 2;
  
  return (
    <TextField 
      required={isRequired}
      multiline 
      className='text-area' 
      fullWidth 
      value={props.selectedReason.reason} 
      onChange={event => { 
        props.handleChangeReason({ 
          ...props.selectedReason, 
          reason: event.target.value 
        }); 
      }} 
    />
  );
};

// 在JSX中调用函数渲染
<div className='row'>
  <div className='col-xs-12'>
    {renderReasonInput()}
  </div>
</div>

总的来说，第一种写法是最适合你当前需求的，简洁直观，完全能实现你要的效果。

内容的提问来源于stack exchange，提问作者Baba