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

Question

我正在使用React在我的spfx webpart中实现文本展开控制器。我需要将showMore和showLess字符串链接替换为ExpandMore和ExpandLess材料UI图标，有没有相关的方法可以实现这个功能？

<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。

- Bini Jacob

---

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

<ShowMoreText /* 默认选项 */ lines={2} more='展示更多' less='展示较少' anchorClass='' onClick={this.executeOnClick} expanded={false}

{item["description"]}</ShowMoreText> 我需要在 Show 和 Less 字符串属性中使用以下 Material Icons。 - Bini Jacob

有没有添加图标到more='显示更多' less='显示较少'的方法？ - Bini Jacob

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>
  );
}

- keikai

---

它显示[SPLoaderError.loadComponentError]：无法加载组件“4a4b6a0e-941e-4cb8-99ed-42b480f42980”（VerticalTimelineWpWebPart）。原始错误：无法从组件“4a4b6a0e-941e-4cb8-99ed-42b480f42980”（VerticalTimelineWpWebPart）加载入口点。原始错误：缩小的React错误＃321；请访问https://reactjs.org/docs/error-decoder.html?invariant=321获取完整消息，或使用非缩小的dev环境获取完整错误和其他有用的警告。 - Bini Jacob

@BiniJacob 这与本帖无关，请检查在线演示，谢谢。 - keikai