test.js 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. const render1 = ({ styles }) => (
  2. <div style={styles} key="something">
  3. Keep the wrapping parens. Put each key on its own line.
  4. </div>
  5. );
  6. const render2 = ({ styles }) => <div style={styles} key="something">
  7. Create wrapping parens.
  8. </div>;
  9. const render3 = ({ styles }) => <div style={styles} key="something">Create wrapping parens.</div>;
  10. const render4 = ({ styles }) => <div style={styles} key="something">Create wrapping parens and indent <strong>all the things</strong>.</div>;
  11. const render5 = ({ styles }) => <div>Keep it on one line.</div>;
  12. const render6 = ({ styles }) => (
  13. <div attr1="aaaaaaaaaaaaaaaaa" attr2="bbbbbbbbbbb" attr3="cccccccccccc">
  14. <div attr1="aaaaaaaaaaaaaaaaa" attr2="bbbbbbbbbbb" attr3="cccccccccccc" attr4>ddd d dd d d dddd dddd <strong>hello</strong></div>
  15. <div attr1="aaaaaaaaaaaaaaaaa" attr2="bbbbbbbbbbb" attr3="cccccccccccc" attr4>ddd d dd d d dddd dddd <strong>hello</strong></div>
  16. <div attr1="aaaaaaaaaaaaaaaaa" attr2="bbbbbbbbbbb" attr3="cccccccccccc" attr4>
  17. <div attr1="aaaaaaaaaaaaaaaaa" attr2="bbbbbbbbbbb" attr3="cccccccccccc" attr4>ddd d dd d d dddd dddd <strong>hello</strong></div> <strong>hello</strong></div>
  18. </div>
  19. )
  20. const render7 = () =>
  21. <div>
  22. <span /><span>Dont break each elem onto its own line.</span> <span />
  23. <div /> <div />
  24. </div>
  25. const render7A = () => (
  26. <div>
  27. <div /><div /><div />
  28. </div>
  29. )
  30. const render7B = () => (
  31. <div>
  32. <span> <span/> Dont break plz</span>
  33. <span><span/>Dont break plz</span>
  34. <span>Dont break plz<span/></span>
  35. </div>
  36. )
  37. const render8 = (props) => <div>{props.text}</div>
  38. const render9 = (props) => <div>{props.looooooooooooooooooooooooooooooong_text}</div>
  39. const render10 = (props) => <div>{props.even_looooooooooooooooooooooooooooooooooooooooooonger_contents}</div>
  40. const notJSX = (aaaaaaaaaaaaaaaaa, bbbbbbbbbbb) => this.someLongCallWithParams(aaaaaa, bbbbbbb).anotherLongCallWithParams(cccccccccccc, dddddddddddddddddddddd)
  41. React.render(
  42. <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google" />
  43. , document.querySelector('#react-root')
  44. )
  45. const renderTernary = (props) =>
  46. <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google">
  47. {props.showTheThing ?
  48. <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google">Hello world</BaseForm>
  49. : "hello " + "howdy! "}
  50. {props.showTheThing ?
  51. <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google">Hello world</BaseForm>
  52. :
  53. null
  54. }
  55. {props.showTheThing ? null :
  56. <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google">Hello world</BaseForm>
  57. }
  58. {props.showTheOtherThing ? <div>I am here</div> : <div attr="blah" />}
  59. {props.showTheOtherThing ? <div>I am here!!</div> : null}
  60. </BaseForm>