Question

我想在输入类型上有条件地添加道具，我想检查input_key是否为数字，如果是，我想添加min_max道具，因为我不想要它添加了任何类型的

 const min_max = {
   min: 0,
   max: 100
 };
 <Input
    type={type}
    name={input_key}
    id={input_key}
    {input_key === 'number' && ...min_max}
    required={required}
    placeholder={placeholder}
  />

如何通过使用此类传播使它起作用？

Answer 1

您可以利用三元条件

<Input
    type={type}
    name={input_key}
    id={input_key}
    {...(input_key === 'number'? min_max: {})}
    required={required}
    placeholder={placeholder}
  />

Answer 2

只需要一个条件并使用传播语法即可。

// sample prop
let input_props = {
  type,
  name: input_key,
  id: input_key,
}

// condition to add min_max as prop.
if (input_key === 'number') {
  input_props = {
    ...input_props,
    ...min_max              // include min_max 
  }
}

return (
  <Input
    {...input_props}        // spread syntax to pass all input_props
    required={required}
    placeholder={placeholder}
  />
)

Answer 3

没什么特别的

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }


  render() {
    const min_max = {
      max : 10,
      min : 1
    }
    
    const j = false;
  
    return (
      <div>
       <input type="number" { ...(j && min_max || {})} />
      </div>
    );
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 4

我认为如果输入的最小值和最大值分别为

 <Input
type={type}
name={input_key}
id={input_key}
max={inputKey === 'number' ? min_max.max : ''} 
min={inputKey === 'number' ? min_max.min : ''} 
required={required}
placeholder={placeholder}
/>

希望有帮助

Answer 5

您可以将其变成一个函数

  const getNumberInputProps = (inputKey, otherProps) => {
    if (inputKey === "number")
        return otherProps
    return {}
}

然后您可以调用它并像这样传播输出

 <Input
  type={type}
  name={input_key}
  id={input_key}
  {...getNumberInputProps(input_key, min_max)}
  required={required}
  placeholder={placeholder}
/>

如何在有条件的组件上有条件地添加道具？

5 个答案: