Reactive Component
class MyComponent extends Component { | |
componentWillMount() { | |
alert('will mount') | |
} | |
onClick = () => { | |
alert('Button Clicked') | |
// Forward click to the outer listeners. | |
this.props.onClick() | |
} | |
render() { | |
return ( | |
<div> | |
<Button | |
disabled={this.props.disabled} | |
onClick={this.onClick} | |
> | |
{this.props.text} | |
</Button> | |
</div> | |
) | |
} | |
} |
// Using https://github.com/tc39/proposal-observable | |
const render = ({lifecycle, disabled, text}) => { | |
let myButton | |
const container = div({ | |
children: [myButton = button({disabled, children: text, lifecycle})] | |
}) | |
return {container, myButton} | |
} | |
const MyComponent = (props) => { | |
const {container, myButton} = render(props) | |
const events = new Observable((observer) => { | |
myButton.events.subscribe({next: (event) => { | |
alert('Button event', event) | |
// Forward click to outer listeners. | |
observer.next(event) | |
}}) | |
}) | |
props.lifecycle.subscribe({next: (state) => { | |
alert('lifecycle', state) // for e.g. willMount | |
}}) | |
return {renderable: container.renderable, events} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Todo: