Foundation: Render Functions

[JasonGore]

Current render functions that pass in render arg are very powerful but also complex and relatively hard to use, as this CodePen illustrates.

TODO:

• Render functions should allow null as a return value

Explore:

• Possibilities of allowing default render function that would also be compatible with functional components, like (props, Component, etc.) => JSX.
  • Define methods for specifying and mixing in props.
  • Issues with passing on styling?
  • Can render tree be wrapped?
  • Asynchronous scenarios?
  • Document any shortcomings as compared to renderTree method.
• Explore ways of supporting both functional components and more powerful render argument.
  • Is there any way to identify a difference during runtime?
  • Could a slot property bag be used to specify slot elements? i.e. ISlotProp = { props: propsObject}, render: (props, Component) => {}, renderWrapper: (render) => { render(stuff) }}
  • Render Helper?
    • https://github.com/OfficeDev/office-ui-fabric-react/pull/7930/files

      function renderButton: ISlotRenderHelper<IButtonViewProps, IButtonSlots> = (props, Slots) => {
        ...
      }

[JasonGore]

Resolved with #8754.