reactjs - 如何使用反应显示无法选择/复制的文本

Question

我注意到一些网站发布了没有人可以选择或复制的文本。如何在 React 中实现这一点？是否可以？有时我相信他们正在使用一些图像，但这可能是一个使用太多字节的解决方案。

标签： reactjsecmascript-6

Answer 1

您可以user-select: none;在不希望用户选择的元素上使用。

function App() {
  return <div style={{ userSelect: "none" }}>Unselectable text</div>;
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>