reactjs - 如何根据使用反应的条件返回 jsx？

Question

我想根据某些条件使用 react 渲染 jsx。

我想做什么？

我有一个像这样的通用组件，

const ReusableComponent = ({
    hideIcon,
    renderActions,
 }) => {
     return 
         ( 
             {!hideIcon && 
                 <svg/>
             }
             {
                 renderActions ? (
                     <div>{renderActions}</div>
                 ) : output.length > 1 &&
                     selectPlacement === 'top' ? (
                         <Select/>
                     ) : null
              }
          );
      }

现在我有两个组件 Component1 和 Component2 使用这个

const Component1 = () => {
    const renderActions = (
        <button> Cancel </button>
    );
    return (
        <ReusableComponent
            renderActions,
        />
    );
}

const Component2 = () => {
    const renderActions = (
        <button> Edit </button>
    );
    return (
        <ReusableComponent
            renderActions,
        />
    );
}

上面的代码工作正常。但是现在的问题是从上面的代码中可以看出，renderActions 是在 svg 之后渲染的。但是对于 Component2，我希望在 renderActions 之后渲染 svg。

我如何修改上面的代码，例如仅对于 Component2，svg 在 renderActions 之后呈现。

我是使用反应和编程的新手。有人可以帮我解决这个问题。谢谢。

编辑：

我已经尝试过类似下面的东西

const Component2 = () => {
    const renderActions = (
        <button> Edit </button>
    );
    return (
        <ReusableComponent
            renderActions,
            IconToLeft={true}
        />
    );
}

const renderIconToLeft = (
    <>
        {!hideIcon && //icon is rendered first
             <svg/>
         }
        {
            renderActions ? (
                <div>{renderActions}</div>
            ) : output.length > 1 &&
                selectPlacement === 'top' ? (
                     <Select/>
                ) : null
         }
         
         
    </>
);

const renderIconToRight = (
    <>
        {
            renderActions ? (
                <div>{renderActions}</div>
            ) : output.length > 1 &&
                selectPlacement === 'top' ? (
                     <Select/>
                ) : null
         }
         
         {!hideIcon && //icon is rendered last
             <svg/>
         }
     </>  
 
);

const ReusableComponent = ({
    hideIcon,
    renderActions,
    iconToLeft,
 }) => {
     return 
         (
             {iconToLeft ? renderIconToLeft : renderIconToRight} 
         );
      }

以上作品。但是正如您所见，当 renderActions 为 true 时，renderIconToLeft 和 renderIconToRight 方法会渲染 jsx。换句话说，我怎样才能使代码更好。不重复相同的代码。谢谢

标签： reactjs

Answer 1

也许是这样的：

const ReusableComponent = ({
    hideIcon,
    renderActions,
    iconToLeft
 }) => {
     return 
         ( 
             {!hideIcon && iconToLeft &&
                 <svg/>
             }
             {
                 renderActions ? (
                     <div>{renderActions}</div>
                 ) : output.length > 1 &&
                     selectPlacement === 'top' ? (
                         <Select/>
                     ) : null
              }
             {!hideIcon && !iconToLeft &&
                 <svg/>
             }
          );
      }