在 React 中将元素插入到子组件中答案

【问题标题】：Insert element into child components in React在 React 中将元素插入到子组件中
【发布时间】：2020-03-20 18:53:58
【问题描述】：

在我的 React 项目中，我有一个第三方预编译器，它根据 markdown 输入生成多个 <p> 元素。现在，我想在第一段的开头添加一些自定义内容，但是第三方内容提供商不支持。我想知道是否有插入子组件的方法（或至少使用CSS模仿外观）。

比如我想实现一个显示如下的组件

备注1：降价内容放在这里...

向我提供了一个第三方组件<Markdown />，它在<p> 标签数组中呈现降价内容。

我不想使用 CSS ::before 伪元素，因为我想使用 React 来管理要插入的内容，而不是将其作为原始字符串写入 content CSS 属性中。

我目前正在考虑使用 React Portal 将额外的文本渲染到 DOM 外部的 <span> 标记中，并将其插入到我在组件安装时找到的第一个 <p> 标记中。但是，我不确定是否有更好的方法来实现这一点。

【问题讨论】：

标签： javascript html reactjs

【解决方案1】：

我在使用 react-markdown 时遇到了类似的问题。

我想实现首字下沉（请参阅https://sunknudsen.com/privacy-guides/spoof-anonymize-your-mac-address-and-hostname-automatically-at-boot-on-macos）。

花了几个小时试图弄清楚如何做到这一点。最终使用了span。

见Is it possible to apply CSS only to first letter of first paraphraph but only if paraphraph first child is text vs an element such as span?

# Spoof (anonymize) your MAC address and hostname automatically at boot on macOS

![macbook](macbook.jpg)

> Unfortunately this guide does not work on Macs equipped with the new T2 chip running macOS Mojave. If that’s your case, please upgrade to Catalina.

<span class="drop-cap">E</span>very network adapter (the physical hardware used to connect to Wi-Fi access points) has its very own (and very unique) identifier called a [MAC address](https://en.wikipedia.org/wiki/MAC_address). It looks something like this: `00:0C:29:5B:14:B3`.

【讨论】：