docs: Affix - don't include arrow-functions inside component props; use refs instead

[jkoudys]

In /components/affix doc, I see this bad practice:

const Demo = () => {
  return (
    <div className="view-port">
      <div id="scrollable-container">
        <div className="background">
          <br />
          <br />
          <br />
          <Affix target={() => document.getElementById('scrollable-container')} offsetTop={20}>
            <Button type="primary">Fixed at the top of container</Button>
          </Affix>
        </div>
      </div>
    </div>
  );
};

What's wrong with this:

1. Using an arrow-function with a direct return. () => { return ( is pointless noise. Say () => ( instead.
2. You're using a getElementById to directly reference an element rendered in the same component. Huge bad-practice. This is what refs are for: https://facebook.github.io/react/docs/refs-and-the-dom.html
3. Don't declare arrow-functions inside a component prop like I see in <Affix target. This was popular a year ago, but is considered bad-practice now, and violates many eslint rules. Using a ref properly will fix this too.

[jkoudys]

As a side-note, I understand it's just a demo, but seeing <br /><br /><br /> is an ugly way to style. If it's meant to demo some components taking vertical space above the <Affix>, maybe a <p> with some content would make more sense. I really don't want to work with developers who learn from this example, and think that using multiple <br />s is a wise way to vertically align content.

[benjycui]

Yep, you are right... If you have any idea to improve documentation and demos, just create a PR to master.

[lock]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.