Brian Vaughn
7 years ago
5 changed files with 33 additions and 14 deletions
@ -0,0 +1,11 @@ |
|||||
|
import FancyButton from './fancy-button'; |
||||
|
|
||||
|
const ref = React.createRef(); |
||||
|
|
||||
|
// Our ref will point to the FancyButton component,
|
||||
|
// And not the ThemeContext.Consumer that wraps it.
|
||||
|
// This means we can call FancyButton methods like ref.current.focus()
|
||||
|
// highlight-next-line
|
||||
|
<FancyButton ref={ref} onClick={handleClick}> |
||||
|
Click me! |
||||
|
</FancyButton>; |
@ -0,0 +1,16 @@ |
|||||
|
class FancyButton extends React.Component { |
||||
|
focus() { |
||||
|
// ...
|
||||
|
} |
||||
|
|
||||
|
// ...
|
||||
|
} |
||||
|
|
||||
|
// Use context to pass the current "theme" to FancyButton.
|
||||
|
// Use forwardRef to pass refs to FancyButton as well.
|
||||
|
// highlight-range{1,3}
|
||||
|
export default React.forwardRef((props, ref) => ( |
||||
|
<ThemeContext.Consumer> |
||||
|
{theme => <Button {...props} theme={theme} ref={ref} />} |
||||
|
</ThemeContext.Consumer> |
||||
|
)); |
@ -1,12 +0,0 @@ |
|||||
const Button = ({theme, children}) => ( |
|
||||
<button className={theme ? 'dark' : 'light'}> |
|
||||
{children} |
|
||||
</button> |
|
||||
); |
|
||||
|
|
||||
// highlight-range{1,3}
|
|
||||
export default React.forwardRef((props, ref) => ( |
|
||||
<ThemeContext.Consumer> |
|
||||
{theme => <Button {...props} theme={theme} ref={ref} />} |
|
||||
</ThemeContext.Consumer> |
|
||||
)); |
|
Loading…
Reference in new issue