Props 属性

  • JSX属性名使用骆驼式风格camelCase.

    1. // bad
    2. <Foo
    3.   UserName="hello"
    4.   phone_number={12345678}
    5. />
    7. // good
    8. <Foo
    9.   userName="hello"
    10.   phoneNumber={12345678}
    11. />

  • 如果属性值为 true, 可以直接省略. eslint: react/jsx-boolean-value

    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: jsx-a11y/img-redundant-alt

    为什么? 屏幕助读器已经把 img 标签标注为图片了, 所以没有必要再在 alt 里说明了.

    1. // bad
    2. <img src="hello.jpg" alt="Picture of me waving hello" />
    4. // good
    5. <img src="hello.jpg" alt="Me waving hello" />

  • 使用有效正确的 aria role属性值 ARIA roles. eslint: jsx-a11y/aria-role

    1. // bad - not an ARIA role
    2. <div role="datepicker" />
    4. // bad - abstract ARIA role
    5. <div role="range" />
    7. // good
    8. <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">为什么?)

    1. // bad
    2. {todos.map((todo, index) =>
    3. <Todo
    4.   {...todo}
    5.   key={index}
    6. />
    7. )}
    9. // good
    10. {todos.map(todo => (
    11. <Todo
    12.   {...todo}
    13.   key={todo.id}
    14. />
    15. ))}

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

    为什么? propTypes 可以作为模块的文档说明, 并且声明 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
    12. function SFC({ foo, bar, children }) {
    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. };
    20. SFC.defaultProps = {
    21. bar: '',
    22. children: null,
    23. };

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

    为什么? 除非你很想传递一些不必要的属性。对于React v15.6.1和更早的版本，你可以给DOM传递一些无效的HTML属性

    例外情况:

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

    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. }

  • 只有在清楚明白扩展对象时才使用扩展运算符。这非常有用尤其是在使用Mocha测试组件的时候。 

    1. export default function Foo {
    2. const props = {
    3.  text: '',
    4.  isPublished: false
    5. }
    7. return (<div {...props} />);
    8. }

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

    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;
    10. return <WrappedComponent {...this.props} />
    11. }