Условные атрибуты в React js

Вы можете передать null, если его там нет, т.е.:

<InputGroup
          placeholder = {placeholder}
          width = {width}
          leftIcon = "search"
          onChange = {onChangeFn?onChangeFn:null} 
          onSubmit = {onSubmitFn ? onSubmitFn : null}
          rightElement = {
            <Button
              type = "submit"
              icon = {leftIcon}
              minimal = {true}
              intent = {Intent.PRIMARY}
            />
          }
        />

Он убедится, что функция есть, а затем вызовет функцию, иначе ничего не будет.

я бы сделал так:

Идея состоит в том, чтобы иметь объект optionalProps, пустой объект для любых возможных условных свойств, когда свойство существует, мы добавляем его к объекту, затем в компоненте InputGroup мы применяем его как {...optionalProps}, который будет извлекать любые добавленные свойства в объект. и ничего не возвращать, если null.

мы могли бы использовать другой подход: onChange = {onChange && onChange}

Но обратите внимание, что это вернет false как значение для случаев, когда onChange не существует.

  render() {
    const { placeholder, leftIcon, onSubmit, onChange, width } = this.props;
    let optionalProps = {};
    if (onChange){
      optionalProps['onChange'] = onChange;
    }
    if (onSubmit){
      optionalProps['onSubmit'] = onSubmit;
    }

    return (
      <form
        style = {{ width }}
        onSubmit = {e => {
          e.preventDefault();
          onSubmit(e.target[0].value);
        }}
      >
        <InputGroup
          placeholder = {placeholder}
          width = {width}
          leftIcon = "search"
          {...optionalProps}
          rightElement = {
            <Button
              type = "submit"
              icon = {leftIcon}
              minimal = {true}
              intent = {Intent.PRIMARY}
            />
          }
        />
      </form>
    );
  }

Элементы jsx также могут принимать объекты. Инициализируйте объект, который содержит информацию для обеих ситуаций, а затем добавьте условие, чтобы добавить функцию, если она существует в переданных свойствах.

render() {
    const { placeholder, leftIcon, onSubmit, onChange, width } = this.props;
    const inputGroupProps = {
    placeholder,
    width,
    leftIcon: 'search',
    rightElement: (
        <Button
        type = "submit"
        icon = {leftIcon}
        minimal = {true}
        intent = {Intent.PRIMARY}
        />
      )
    }
    if (onChange) {
    inputGroupProps.onChange = onChange
    }
    if (onSubmit) {
        inputGroupProps.onSubmit = onSubmit
    }
    return (
    <form
        style = {{ width }}
        onSubmit = {e => {
        e.preventDefault();
        onSubmit(e.target[0].value);
        }}
    >
        <InputGroup {...inputGroupProps} />
    </form>
    );
}

Хотя я не рекомендую это, добавление обоих технически допустимо, потому что свойство, которое не передается от родителя, но деструктурировано, будет undefined. Я не рекомендую это, потому что это не выразительно и, вероятно, смутит вас в будущем.

<InputGroup
placeholder = {placeholder}
width = {width}
leftIcon = "search"
rightElement = {
    <Button
    type = "submit"
    icon = {leftIcon}
    minimal = {true}
    intent = {Intent.PRIMARY}
    />
}
onChange = {onChange} // will be undefined and have no behavior if parent does not pass an onChange prop
onSubmit = {onSubmit} // same for this one
/>