在React项目中，实现文章复制、评论添加表情功能，可以分别使用navigator.clipboard API和自定义组件来实现。以下是实现这些功能的简要代码示例：
- 文章复制：
// Article.js
import React, { useRef } from 'react';
const Article = ({ content }) => {
const articleRef = useRef(null);
const copyArticle = async () => {
if (!articleRef.current) return;
try {
await navigator.clipboard.writeText(articleRef.current.textContent);
console.log('文章已复制到剪贴板');
// 可以添加用户界面反馈，例如显示复制成功的提示
} catch (err) {
console.error('复制失败', err);
}
};
return (
<div>
<article ref={articleRef} dangerouslySetInnerHTML={{ __html: content }} />
<button onClick={copyArticle}>复制文章</button>
</div>
);
};
export default Article;- 评论添加表情：
// EmojiPicker.js
import React from 'react';
const EmojiPicker = ({ onEmojiClick }) => {
const handleEmojiClick = (emoji) => {
if (onEmojiClick) {
onEmojiClick(emoji);
}
};
return (
<div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-around' }}>
{/* 这里添加表情图片，可以使用emoji库或自定义图标 */}
{emojis.map((emoji) => (
<button key={emoji} onClick={() => handleEmojiClick(emoji)}>
{emoji}
</button>
))}
</div>
);
};
export default EmojiPicker;
// CommentInput.js
import React, { useState } from 'react';
import EmojiPicker from './EmojiPicker';
const CommentInput = ({ onSubmit }) => {
const [comment, setComment] = useState('');
const handleSubmit = (event) => {
event.preventDefault();
if (onSubmit) {
onSubmit(comment);
setComment('');
}
};
const handleEmojiClick = (emoji) => {
setComment(comment + emoji);
};
return (
<form onSubmit={handleSubmit}>
<textarea value={comment} onChange={(e) => setComment(e.target.value)} />
<EmojiPicker onEmojiClick={handleEmojiClick} />
<button type="submit">发表评论</button>
</form>
);
};
export default CommentInput;在CommentInput组件中，我们使用一个表情选择器组件EmojiPicker，允许用户选择表情并将其添加到评论文本中。当用户提交评论时，handleSubmit函数会处理评论内容，并可能将其发送到服务器。这里的emojis是一个包含可用表情列表的数组，你需要根据实际情况替换为合适的表情图片或字符。