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

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>