基于 true 或 false 属性有条件地渲染组件

Question

this should be a pretty straightforward question. I have the following block of code:

  return (
    <StyledActiveOptions
      className={classNames("lookup-active-options form-control", className)}
      role="button"
      tabIndex="0"
      aria-haspopup="true"
      aria-label={ariaActiveLabel}
      isEnabled={!isDisabled && !isReadOnly}
      onClick={onOpen}
      onFocus={onFocus}
      onKeyDown={onKeyDown}
    >
      {activeOptions.map((option) => (
        <ChoiceOption
          key={option.code}
          option={option}
          optionContentConfiguration={optionContentConfiguration}
          isMultiple={isMultiple}
          isRemovable={!isReadOnly && !isDisabled}
          onRemove={onRemove}
          renderIcon={renderIcon}
        />
      ))}
    </StyledActiveOptions>
  );
};

Basically, I want to re-factor this so that if renderIcon is true - that we return <ChoiceOptionIcon /> component instead of just ChoiceOption /> & vice versa. I'm not entirely sure of the most efficient way of doing this that limits repeated code but ensure both components get all the props. Can anyone advise?

Answer 1

When you are in a situation where you might have to render one of two different components passing the same (long list of) props, you can always replace:

import ChildComp1 from '/path';
import ChildComp2 from '/path';

const ParentComp = () => {
  return condition
    ? <ChildComp1 prop1  prop2 ...  propN />
    : <ChildComp2 prop1  prop2 ...  propN />
}

with:

import ChildComp1 from '/path';
import ChildComp2 from '/path';

const ParentComp = () => {
  const ChildToRender = condition ? ChildComp1 : ChildComp2;
  return <ChildToRender prop1  prop2 ...  propN />
}

Answer 2

Something like this would work I presume

 <StyledActiveOptions
        className={classNames("lookup-active-options form-control", className)}
        role="button"
        tabIndex="0"
        aria-haspopup="true"
        aria-label={ariaActiveLabel}
        isEnabled={!isDisabled && !isReadOnly}
        onClick={onOpen}
        onFocus={onFocus}
        onKeyDown={onKeyDown}
      >
        {activeOptions.map((option) =>
          option.renderIcon ? (
            <div>Put a different component here</div>
          ) : (
            <ChoiceOption
              key={option.code}
              option={option}
              optionContentConfiguration={optionContentConfiguration}
              isMultiple={isMultiple}
              isRemovable={!isReadOnly && !isDisabled}
              onRemove={onRemove}
              renderIcon={renderIcon}
            />
          )
        )}
      </StyledActiveOptions>