Reactjs 为React中的多个文本子级实现“阅读更多”功能

我见过多个

npm

包使用单个文本子组件来实现这一点，但它们似乎都不支持多个文本子组件

例如，我想实现对一个组件的多读/少读，该组件有2个子组件：

function ReadMoreComponent (props) {
  return (
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  )
}

函数readmore组件（道具）{
返回(
第1款

第2款

)
}

如果

段落1

足够长，

ReadMoreComponent

将部分呈现

段落1

，并显示“阅读更多”按钮。如果

段落1

短于限制，则在显示“阅读更多”按钮之前，

readmore组件将显示整个
段落1
和部分
段落2

是否可以在具有多个文本子级的React组件上实现多读/少读功能？
您可以尝试这样做。
添加一些功能，使您的子组件成为简短版本：

function short(arr, maxLen){
    let l=0;
    for (let i=0; i<arr.length; i++){
        if (l+arr[i].props.children.length > maxLen) {
              let res = arr.slice(0,i);
                let partial = arr[i].props.children.substring(0,maxLen-l)
                res.push((<p>{partial}</p>))
                return res;
            }
        l = l+arr[i].props.children.length;
    }
    return arr;
}

功能短路（arr、maxLen）{
设l=0；
for（设i=0；i maxLen）{
设res=arr.slice（0，i）；
let partial=arr[i].props.children.substring（0，maxLen-l）
res.push（（{partial}
）
返回res；
}
l=l+arr[i].props.children.length；
}
返回arr；
}

创建React组件并使用其状态切换短/长模式：

function ReadMoreComponent (props) {
    const [shortMode, setShortMode] = useState(true);
  return (
    <React.Fragment>
      {shortMode ? (<React.Fragment>{short(props.children, 25)}</React.Fragment>) : props.children}
      <button onClick={() => setShortMode(!shortMode)}>{shortMode ? 'full' : 'short'}</button>
    </React.Fragment>
  )
}

函数readmore组件（道具）{
const[shortMode，setShortMode]=useState（真）；
返回(
{shortMode？（{short（props.children，25）}）：props.children}
setShortMode（！shortMode）}>{shortMode？'full'：'short'}
)
}

使用您的组件：

<ReadMoreComponent>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
</ReadMoreComponent>


第1款

第2款

第3款

第4段

个人不熟悉这些软件包，但您是否尝试过在这些软件包中使用
？因为这是以anway方式返回相邻JSX元素的唯一方法。如果这不起作用，也许类似的方法会起作用。组件是对某些段落元素的包装。我们需要制作一个高阶组件来包装该文本组件并添加该功能。它需要访问props.children来访问片段，然后在片段的子级中迭代段落，直到达到硬编码的最大长度。当/如果发生这种情况，我们将选择最后一段之前的所有内容并添加“Read More”文本。整个文本是否打开取决于HOC中的一个有状态变量，state={isReadMoreOn:true}等。谢谢！这个解决方案非常简单，不知道为什么我在问之前没有想到它。它对我的使用仍然不起作用，因为我的
中不仅有文本，还有多个
和媒体标签，但它已经是一个好的开始。