• 如果属性值为 true, 可以直接省略. eslint: 

    1. // bad
    2. <Foo
    3.   hidden={true}
    4. />
    6. // good
    7. <Foo
    8.   hidden
    9. />
    11. // good
    12. <Foo hidden />

  • <img> 标签总是添加 alt 属性. 如果图片以presentation(感觉是以类似PPT方式显示?)方式显示，alt 可为空, 或者<img> 要包含role="presentation". eslint: jsx-a11y/alt-text

    1. // bad
    2. <img src="hello.jpg" />
    4. // good
    5. <img src="hello.jpg" alt="Me waving hello" />
    7. // good
    8. <img src="hello.jpg" alt="" />
    10. // good
    11. <img src="hello.jpg" role="presentation" />

  • 不要在 alt 值里使用如 “image”, “photo”, or “picture”包括图片含义这样的词， 中文也一样. eslint: 

    1. // bad - not an ARIA role
    2. <div role="datepicker" />
    4. <div role="range" />
    6. // good
    7. <div role="button" />

  • 不要在标签上使用 accessKey 属性. eslint: jsx-a11y/no-access-key

    1. // bad
    2. <div accessKey="h" />
    4. // good
    5. <div />

  • 避免使用数组的index来作为属性key的值，推荐使用唯一ID. (@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318">为什么?)

  • 对于所有非必须的属性，总是手动去定义defaultProps属性.

    1. // bad
    2. function SFC({ foo, bar, children }) {
    3. return <div>{foo}{bar}{children}</div>;
    4. }
    5. SFC.propTypes = {
    6. foo: PropTypes.number.isRequired,
    7. bar: PropTypes.string,
    8. children: PropTypes.node,
    9. };
    11. // good
    13. return <div>{foo}{bar}{children}</div>;
    14. }
    15. SFC.propTypes = {
    16. foo: PropTypes.number.isRequired,
    17. bar: PropTypes.string,
    18. children: PropTypes.node,
    19. SFC.defaultProps = {
    20. bar: '',
    21. children: null,
    22. };

  • 尽可能少地使用扩展运算符

    例外情况:

  • 使用了变量提升的高阶组件 

    1. function HOC(WrappedComponent) {
    2. return class Proxy extends React.Component {
    3.  Proxy.propTypes = {
    4.    text: PropTypes.string,
    5.    isLoading: PropTypes.bool
    6.  };
    8.  render() {
    9.    return <WrappedComponent {...this.props} />
    10.  }
    11. }
    12. }

  • 特别提醒：尽可能地筛选出不必要的属性。同时，使用来预防问题出现。 

    1. // good
    2. render() {
    3. const { irrelevantProp, ...relevantProps  } = this.props;
    4. return <WrappedComponent {...relevantProps} />
    5. }
    7. // bad
    8. render() {
    9. const { irrelevantProp, ...relevantProps  } = this.props;
    11. }