使用单个可重用的React JS组件读取/显示或多或少的html内容或普通文本

Question

当我在网页上使用Read more and Read less(Show more or Showless(显示的HTML内容时，我在谷歌上搜索了很多内容以获得快速解决方案。不幸的是，我未能收集到解决方案的单一来源。我开始编写自己的解决方案，并决定如果对某人有帮助，就分享自己的解决方法。

Answer 1

首先，您需要安装"html截断">

npm i html截断

import React, {useState, useCallback, useEffect} from 'react';
import truncate from "truncate-html";
const ReadMoreMaster = (props) => {
let {byWords,parentClass, readLess, readMore, length, ellipsis, spaceBefore} = props;
const [showMore, setShowMore] = useState(false);
truncate.setup({
byWords: !!byWords,
ellipsis: ellipsis ? ellipsis : '',
})
const [state, setState] = useState({
showRealData: false,
realData: props.children,
truncatedData: truncate(props.children, length ? length : 2)
});
const handleShowData = useCallback(() => {
setState(prevState => ({
...prevState,
showRealData: !prevState.showRealData
}));
}, [setState]);
useEffect(() => {
if(byWords && props.children) {
const textDetails = props.children.replace(/<[^>]+>/g, '');
const arr = textDetails.split(" ");
if(arr.length > length) {
setShowMore(true);
}
}
}, [byWords])
return (
<div className={parentClass}>
<div
dangerouslySetInnerHTML={{
__html: `${
!state.showRealData ? state.truncatedData : state.realData
}`
}}
/>
{spaceBefore === false ? '' : ' '}
{
showMore &&
<a href={void (0)} className="read-more" onClick={handleShowData}>
{!state.showRealData ? readMore ? readMore : 'Read More' : readLess ? readLess : 'Read Less'}
</a>
}
</div>
);
};
export default ReadMoreMaster;

现在调用如下组件：

<ReadMoreMaster
byWords={true}
length={150}
ellipsis="..."
>
<p>your content with or without HTML tag</p>
</ReadMoreMaster>

支持的道具有：

// ...Supported Props...
// parentClass="test" || default value : null
// byWords={true} || default value : false
// ellipsis="..." || default value : null
// length={5} || default value : 2
// readMore="See More" || default value : Read More
// readLess="See less" || default value : Read Less
// spaceBefore={false} || default value : true

全部完成。享受