如何将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>

  );

}