如何将react-show-more更多或更少文本自定义为Material-UI图标

Question

我正在使用 React 在我的 spfx Web 部件中使用 React 显示更多文本控制器。我需要在我的 web 部件中用 ExpandMore 和 ExpandLess 材料 ui 图标替换 showMore 和 showLess 字符串链接。有什么方法吗？

<ShowMoreText

  /* Default options */

  lines={2}

  more="Show More"

  less="Show less"

  anchorClass=""

  onClick={this.executeOnClick}

  expanded={false}

>

  {item["description"]}

</ShowMoreText>

我参考了这个https://npmjs.com/package/react-show-more-text

Answer 1

方法直接传递<Icon />给相关的道具就可以了。<ShowMoreText   more={<ExpandMore />}   less={<ExpandLess />}   ... />来源import React, { useState } from "react";import "./styles.css";import ShowMoreText from "react-show-more-text";import ExpandLess from "@material-ui/icons/ExpandLess";import ExpandMore from "@material-ui/icons/ExpandMore";export default function App() {  const [expand, setExpand] = useState(false);  const onClick = () => {    setExpand(!expand);  };  const text = "12313131313131311";  return (    <div className="App">      <ShowMoreText        lines={2}        more={<ExpandMore />}        less={<ExpandLess />}        onClick={onClick}        expanded={expand}        width={30}      >        {text}      </ShowMoreText>    </div>  );}