根据 true 或 false 属性有条件地渲染组件

Question

这应该是一个非常简单的问题。我有以下代码块：

  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>
  );
};

基本上，我想重构它，以便如果 renderIcon 为真 - 我们 return <ChoiceOptionIcon /> 组件而不仅仅是 ChoiceOption />，反之亦然。我不完全确定限制重复代码但确保两个组件都获得所有道具的最有效方法。谁能给点建议？

Answer 1

我想像这样的东西会起作用

 <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>

Answer 2

当您处于可能必须渲染传递相同（长列表）道具的两个不同组件之一的情况时，您始终可以替换：

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

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

与：

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

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

根据 true 或 false 属性有条件地渲染组件

Conditionally rendering components based on true or false prop

javascript

reactjs

conditional-operator