javascript - 如何自定义 react-show-more 或 less 文本到 Material-UI 图标

Question

我正在使用 react 在我的 spfx webpart 中使用 react 显示更多文本控制器。我需要用我的 webpart 中的 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

标签： javascripthtmlcssreactjsmaterial-ui

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