小编kei*_*kai的帖子

I'm using the React Material UI's Select Component. I wish to remove or speeden the animation that comes when the menu is opening. I tried something like:

 <Select
     ...
     TransitionComponent={({children}) => children}
 >
     <MenuItem value={...}>...</MenuItem>
     ...
 </Select>

但这不起作用，请帮忙

我正在使用 ReactJS 和名为 MaterialUI 的组件库。我的排版组件有问题。

发生的情况是，如果我写了一个长文本，它超出了它的容器并且不会换行：

import React from "react";
import { Redirect } from "react-router";
import { withRouter } from "react-router-dom";

import Container from "@material-ui/core/Container";
import CssBaseline from "@material-ui/core/CssBaseline";
import Typography from "@material-ui/core/Typography";

function Homepage() {
  return (
    <div>
      <React.Fragment>
        <CssBaseline />
        <Container fixed>
          <Typography variant="h1" component="h2" align="center">
            123 456 789 qwertyuiopasdfghjklzxcvbnm
          </Typography>
        </Container>
      </React.Fragment>
    </div>
  );
}

export default withRouter(Homepage);

在图像下方：

这发生在移动模式和桌面模式中。

你知道如何解决这种行为吗？如果已达到容器的最大宽度，我希望长词将在新行上拆分。

我在我的项目中使用material-ui，并且有一个红色的复选框。

当有人仅将鼠标悬停在复选框上时，我想显示选中的图标。

不悬停时它会隐藏。我似乎没有找到合适的选择器。我希望得到任何关于我能做些什么的建议。

我正在使用react.js 进行项目

对于该项目，我应该包括像 Facebook 一样具有无限滚动功能的板

对此，我有一个问题。

当我滚动看板并回忆起更多帖子（例如 Facebook）时，它是否有效

是否仅在帖子底部绘制附加帖子或

它调用整个列表并重新绘制它

ex) case 1 :  {1,2,3} > scroll > {1,2,3} + {4,5} (additional posts)
    case 2 :  {1,2,3} > scroll > {1,2,3,4,5} (whole posts)

如果我做案例1，我想要知道如何做。

谢谢！

我制作了一个小型库，其中包含 20-25 个不同的组件，并为其制作了一个 npm 包。

我想在其中使用这些组件的 React 项目有许多页面[路由]使用延迟加载，因此每个页面都有自己的包。

但是当我在我的主页[App.js]上写下声明时。

    import { MyModal } from 'my-react-lib';

每个组件都被加载到主页包中。所以我的初始加载性能是最差的。[2Mb 初始包大小]

我已经阅读了 Tree Shaking 的概念，并尝试在 Webpack 中实现，甚至使用 Rollup 来实现，但它们只制作了 Bundle.js，但不符合我的要求。

我愿意像进出口一样实现精挑细选。与 date-fns 和 lodash 相同。

      import format from 'date-fns/format';
      import debounce from 'lodash/debounce';

如何实现这一目标？

   import MyModal from 'my-react-lib/MyModal';
   import OtherComponent from 'my-react-lib/OtherComponent';

我有一个自定义钩子

function myCustomHook() {
   const currentComponentName = //? 
   return `currentComponentName${customSuffix}`
}

function Sample() {
  const name = myCustomHook()
}

function Component2() {
  const name = myCustomHook()
}

是否可以获得组件的唯一名称？或此用例的任何其他替代方案？

我的应用程序中有一个表，我在其中对每一行使用 select 。

当我单击并选择行时，左上角会出现一个选中的复选框。我不想显示该复选框，我想显示其他内容，例如带有文本的 div。仅当我单击一行中的复选框时，该 div 才会出现。

这个怎么做？我试图找到呈现该复选框的事件，但我没有成功。如何访问该元素并在其他元素中更改它？沙箱链接：https://codesandbox.io/s/selection-ant-design-demo-vlftk? file=/index.js

我开始学习 React js，并谈到了解构 props 的话题。通常我们做的是我们解构 props 然后使用属性就像下面的 Greet 组件中的代码

import React from "react";
const Greet = props => {
  const { name, heroName } = props; //here I destructured it
  return (
    <div>
      <h1>
        Hello {name} a.k.a {heroName}
      </h1>{" "}
      // and then use simply name and heroName
    </div>
  );
};
export default Greet;

这是我的 App 组件

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import Greet from "./components/Greet";
function App() {
  return (
    <div className="App">
      <Greet name="kaptan" …

我已经按照以下说明构建了一个带有 React 和 Material UI 的简单表格： https: //material-ui.com/components/tables/#table。

它工作正常，但滚动条让我烦恼。

是否有一个选项可以让滚动条从红色箭头开始？或者完全删除它？

先感谢您

代码

    <TableContainer component={Paper} style={{maxHeight: 350}}>
    <Table className={styles.table} size="small" stickyHeader>
      <TableHead>
        <TableRow >
          <TableCell className={styles.header}>
            <Checkbox checked={allSelected} onClick={handleSelectAll} color="primary"/>
          </TableCell>
          <TableCell className={styles.header} align="left">Name</TableCell>
          {props.showAdmin && <TableCell className={styles.header}>Admin</TableCell>}
        </TableRow>
      </TableHead>
      <TableBody>
        {props.employees.map(empl => (
          <TableRow key={empl.id}>
            <TableCell>
              <Checkbox checked={isSelected(empl.id)} onClick={() =>handleSelect(empl.id)} className={styles.checkBox} color="primary"/>
            </TableCell>
            <TableCell component="th" scope="row" style={{paddingRight: 30}}>{empl.name}</TableCell>
            {props.showAdmin && <TableCell align="center"><Checkbox disabled checked={empl.isAdmin} className={styles.checkBox}/></TableCell>}
          </TableRow>
        ))}
      </TableBody>
    </Table>
  </TableContainer>

风格

createStyles({
  table: {
   maxWidth: 350,
   maxHeight: 300
  }, …

我正在使用 React 在我的 spfx Web 部件中使用 React 显示更多文本控制器。我需要在我的 web 部件中将 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