小编Hem*_*ari的帖子

这个示例“图像头像” https://material-ui.com/demos/avatars/来自material-ui v3.2.0网站，但不知何故我在实现时看不到图像。

为什么我在material -ui-v3.2.0“图像头像”示例中看不到图像？

在示例中'icon avatars'，'Letter avatars'我可以看到图像。我使用create-react-app 'react-scripts': '^2.0.4', but also tried on 'react-scripts': '^1.1.5'但没有任何效果。

PFB 代码如下：

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from '@material-ui/core/styles';
import Avatar from '@material-ui/core/Avatar';

const styles = {
  row: {
    display: 'flex',
    justifyContent: 'center',
  },
  avatar: {
    margin: 10,
  },
  bigAvatar: {
    width: 60,
    height: 60,
  },
};

function ImageAvatars(props) {
  const { …

我尚未对静态getDerivedStateFromProps进行研究，因此我试图了解这一点。

我了解React通过引入一种称为静态getDerivedStateFromProps（）的新生命周期方法，在React v16 +中已弃用componentWillReceiveProps。好的，但是想知道为什么React已经改为静态方法而不是普通方法。

为什么

   static getDerivedStateFromProps(nextProps, prevState){

   }

为什么不

   getDerivedStateFromProps(nextProps, prevState){

   }

我无法理解为什么它是静态方法。

我正在尝试使用 className 将 border-radius: 5px 添加到 React-datetime 组件，但不起作用。

例如：

  import ReactDateTime from \xe2\x80\x98react-datetime\xe2\x80\x99;\n\n<ReactDateTime className=\xe2\x80\x98datetime\xe2\x80\x99 />\n\n .datetime{\n border-radius: 5px;\n }\n

我知道react-datetime模块提供了单独的css样式。但我担心的是为什么当我使用 className 时它不接受。

我是打字新手。我已tslint.json创建文件，但对如何使用命令行运行此文件一无所知。请告知我需要使用哪个命令来运行此配置

我正在尝试将以下日期格式化为 Angular 6 中的 MM-DD-YYYY 格式。我也查看了 SO 和其他网站上发布的更简单的问题，但我无法解决它。

我正在使用 Material Angular DatePicker组件。

日期选择器给我

Thu Oct 25 2018 00:00:00 GMT+0400 (Gulf Standard Time)

我想将其格式化为

MM-DD-YYYY

我的代码

<mat-form-field>
    <input matInput [min]="minDate" [matDatepicker]="date" [(ngModel)]="request.date | request.date: 'dd/MM/yyyy hh:mm a'" placeholder="Choose a date">
    <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
    <mat-datepicker #date></mat-datepicker>
</mat-form-field>

我也尝试过像下面这样的 DatePipe 模块，但没有任何效果

this.datePipe.transform(this.request.date,"MM-DD-YYYY")

我听说严格模式通过引发生命周期方法删除警告来帮助以最佳实践方式编写React代码。

我从https://medium.com/@baphemot/whats-new-in-react-16-3-d2c9b7b6193b阅读

我的理解正确吗？严格模式有效吗？它仅适用于不安全的生命周期方法吗？如果不能，我可以在功能组件中使用此功能吗？

  import { StrictMode} from “react”;
  class Test extends Component{
        render(
            <StrictMode>
                   //Some other child component which has all lifecycle methods implemented in it
            </StrictMode>
        );
  }

我已经看到了反应v16中引入的这两个新概念.

据我了解:

useStatesetState与钩子类似,其useEffect工作方式与生命周期方法类似.

我的理解是否正确？如果没有,useState和之间的确切区别是useEffect什么？

我有很多城市都有这样的物体：

[{id: 1, name: 'New York'}, {id: 2, name: 'London'} ...]

我的值是id。

我将数组中的元素（名称）放入选择列表。但我需要添加第一个选项，其中包含数组（名称）中的值，该选项具有相应的 id，但我无法使其工作。

我的组件：

const propTypes = {  
  cities: PropTypes.array,  
  enteredEvent: PropTypes.array  
};

class newEvent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showInOption: ''
    };
    this.handleDictionary = this.handleDictionary.bind(this);
    this.searchTypeEvent = this.searchTypeEvent.bind(this);
  }

  componentDidMount() {
    this.searchTypeEvent();
  }

  handleDictionary(e) {
    ...
  }

  searchTypeEvent() {
    if (this.props.enteredEvent.cityid !== null && this.props.enteredEvent.cityid !== undefined) { // if I have id value
      const type = this.props.cities.find(el => el.id …

我想将低于颜色的线性渐变添加到Material-UI Chip作为背景色。可能吗？

linear-gradient(to right bottom, #430089, #82ffa1)

我正在使用Material-UI v0.18.7。

<Chip backgroundColor={indigo400} style={{width: 120}}>
     <Avatar size={32} color={white} backgroundColor={indigo900}>A</Avatar>
     This is a Chip
</Chip>

在我觉得做手动功能/对象绑定后,我开始使用箭头功能,并且范围相关的问题令人头疼,但我非常认真地了解使用正常功能(ES5)比使用箭头功能(ES6)更好.

我对这些功能的理解

React中的正常函数:

1. 手动绑定对象/函数以便在函数内部使用状态或道具并避免与范围相关的问题
2. 始终在构造函数中绑定对象/函数,但不直接在渲染中绑定
3. 如果你在构造函数中执行它,那么当你的组件第一次渲染时,Webpack只在bundle.js文件中创建一个新对象/函数
4. 如果你直接在渲染中执行它,那么每次组件渲染和重新渲染时,Webpack都会在bundle.js文件中创建一个新对象/函数
5. 如果你没有绑定,那么你就无法访问状态或道具.您必须将当前对象分配给本地变量,否则this.state或this.props是未定义的

React中的箭头功能:

1. 无需在构造函数中绑定对象/函数也不需要渲染
2. 你不需要依赖当前对象的局部变量interms,即,让那=这个;
3. 您不会有范围问题,并且会自动进行对象/功能绑定

但我的查询是,我听说它建议使用正常的功能,并将其绑定在构造函数,而不是使用箭头功能,因为箭头功能创建新的对象/功能的WebPack bundle.js每次你的组件呈现和重新呈现时间.

这是真的？推荐哪个？

这个线程接受了答案在React中正确使用箭头函数说 - >这取决于你在哪里使用箭头功能.如果在render方法中使用了Arrow函数,那么每次调用render时它们都会创建一个新实例,就像bind的工作方式一样.

对不起,如果你觉得这是一个戏剧性的问题,但这是我最大的疑问.请建议