我正在使用 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
1 回答
慕村225694
TA貢獻1880條經驗 獲得超4個贊
方法
直接傳遞<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>
? );
}
- 1 回答
- 0 關注
- 111 瀏覽
添加回答
舉報
0/150
提交
取消