Javascript 创建具有多个元素的样式化组件

我正在尝试创建一个包含多个html标记的“哑”组件。比如：

<div className="component-container">
  <a href="#some-link">Link text</a>
  <p className="para">Some Text</p>
</div>

我知道我能做到：

<Container>
  <a href="#some-link">Link text</a>
  <p className="para">Some Text</p>
</Container>

一些文本

---

但这并不是最优的。我宁愿创建一个普通的React功能组件，它可以将所有标记封装在一个组件中，我可以在任何地方导入，并在一行中使用。

编写类似代码的方法是将其变成您所说的功能组件

const YourComponent = () => (
    <Container>
        <a href="#some-link">Link text</a>
        <p className="para">Some Text</p>
    </Container>
);

constyourcomponent=（）=>(
一些文本
);

---

样式化组件只是样式化元素，但是容器样式化组件当然可以重复使用。

假设您已经创建了这样的样式化组件。但随后将呈现该组件的子级。内部主

div

，

a

或

p

。我不认为样式化组件是用来组合元素的。最好使用react组件。如果你读了API，你就做不到。我对此有点失望。这意味着我们通常不得不求助于普通的功能组件，这意味着并非所有代码都能从样式化组件（如css作用域）和跨组件轻松管理css中获益。因此，我们仍然需要实现其他css作用域技术。所以我想对大项目来说不是很有用。

const YourComponent = () => (
    <Container>
        <a href="#some-link">Link text</a>
        <p className="para">Some Text</p>
    </Container>
);