小编Ida*_*gan的帖子

我正在寻找一种方法来查看我当地的历史变化.

WebStorm中的等价方式:

我知道您可以通过将数组作为可选的第二个参数传递来告诉React跳过效果。

例如：

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes

但是，如果我想控制比较怎么办？添加我自己的比较逻辑。

我希望React.memo可以将一个函数作为第二个参数传递给您。

有时候你想快速从无状态组件转到有状态组件,我想是否有办法让IntelliJ为我做这个(没有创建插件).

例如,从:

const Stateless = ({ propsDestructuring }) => {
  console.log('Some logic');

  return (
    <div>Some JSX</div>
  );
};

至:

class Stateful extends Component {
  render() {
    const {
      propsDestructuring
    } = this.props;

    console.log('Some logic');

    return (
      <div>Some JSX</div>
    );
  }
}

或者从"箭头体型"到显式返回也是有用的,例如从

const Stateless = ({ propsDestructuring }) => (
  <div>Some JSX</div>
);

至:

const Stateless = ({ propsDestructuring }) => {
  return (
    <div>Some JSX</div>
  );
};

使用实时模板在这种情况下不起作用,因为它们不能改变现有代码,只能插入新代码.有什么建议？

我正在使用 React 和 Material-ui，目前我正在做类似下面的代码的事情。
有没有更好的办法？

例如，是否有一个函数允许您访问组件下面的“styles”jss对象中的“props”，该对象最终使用 withStyles() 注入到组件中，而不必执行所有这些丑陋的内联样式？

import React from 'react';
import {
  MaterialComponentOne,
  MaterialComponentTwo,
  MaterialComponentThree,
} from '@material-ui/core';

function MyPureComponent(props) {
  return (
    <MaterialComponentOne
      style={
        props.type === 'secondary'
          ? {
              css_property: 'css_value1',
            }
          : {
              css_property: 'css_value2',
            }
      }
      className={props.classes.MaterialComponentOne}
      position="static"
    >
      <MaterialComponentTwo>
        <MaterialComponentThree
          style={
            props.type === 'secondary'
              ? {
                  css_property: 'css_value1',
                }
              : {
                  css_property: 'css_value2',
                }
          }
          variant="title"
          className={props.classes.MaterialComponentThree}
        >
          {props.title}
        </MaterialComponentThree>
      </MaterialComponentTwo>
    </MaterialComponentOne>
  );
}

const styles = {
  MaterialComponentOne: {
    css_property: 'css_value',
    css_property: 'css_value', …

我需要根据用户角色渲染组件.

例如:如果用户是销售人员,他会看到两个按钮.但如果他得到支持,他只会看到第二个按钮.

import React from 'react';
import Button from './MyCustomButton';

class App extends React.PureComponent {

  render() {
    return (
      <Grid>
        <Button> // visible only for sales manager
          Action A
        </Button>
        <Button> // visible for support and sales manager
          Action B
        </Button>
      </Grid>
    )
  }
}

我真的想避免渲染中的if-else语句.尽可能保持清洁.

有一个好的设计或一些工具/装饰在这里有用吗？

我已经在服务器端处理过了,但我也需要为客户端提供一个干净的解决方案.

谢谢.

我正在使用 Material-UI 和 React 中的 Dialog 和 Select 组件。

只是一个例子：

import React from 'react';
import { Dialog, MenuItem, Select } from '@material-ui/core';

class SomeComponent extends React.PureComponent {

  render() {
    return (
      <Dialog>
        <Select
          value={this.state.age}
          onChange={this.handleChange}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
        </Select>
      </Dialog>
    );
  }

}

单击选择后，我从 Modal.js 收到此错误：

“未捕获的 RangeError：超出最大调用堆栈大小。在 HTMLDocument.Modal._this.enforceFocus (Modal.js?86a5:197)”

有任何想法吗？