Javascript 对于样式化组件，有没有一种方法可以有条件地更改组件的类型？

我有一些看起来与相同数据相同的组件，但有时我希望它是一个链接，有时是一个div，等等。 我可以让它成为一个组件（因为它们具有相同的样式）并执行类似于传递道具的操作来更改组件的类型吗

例如：

import styled, { css } from "styled-components";
import { Link } from "react-router-dom";

export const Container = styled.div`  *<<--- how do I make this styled.div OR styled(Link)*
    some styles here
`;

import styled，{css}来自“styled components”；
从“react router dom”导入{Link}；
export const Container=styled.div`*您可以在组件中传递一个道具。像
prop===true->show as div
&如果
prop==false->show as link
。然后使用ES6，您可以按如下方式实现它


import styled, { css } from "styled-components";
import { Link } from "react-router-dom";

export const Container = (prop) =  {

        { (prop===true) && return (JSX as a div) }

{(prop === false) && return (JSX for as a link) }

}

使用


常量MyComponent=（）=>(
...
);
使用，它是官方API的一部分：

如果希望保留应用于组件的所有样式，但只需切换最终呈现的内容（无论是不同的HTML标记还是不同的自定义组件），则可以在运行时使用“as”属性来执行此操作

constdiv=styled.Div`
颜色：红色；
`;
函数App（）{
返回(
你好
);
}

生成：

<span class="sc-hKgILt eQjPkS App">Hello</span>

你好

---

很好，谢谢！干净利落

const Div = styled.div`
  color: red;
`;

function App() {
  return (
    <Div className="App" as="span">
      Hello
    </Div>
  );
}

<span class="sc-hKgILt eQjPkS App">Hello</span>