如何显示无法使用react选择/复制的文本

时间:2018-08-06 17:19:49

标签: reactjs ecmascript-6

我注意到有些网站发布的文本没有人可以选择或复制。如何在React中实现?可能吗?有时我相信他们正在使用某些图像,但这可能是使用过多字节的解决方案。

1 个答案:

答案 0 :(得分:3)

您可以在用户不想选择的元素上使用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>