Props

Each component has its own input properties - props.

Unlike state, props are static parameters that can not be changed.

For example, this component expects a parameter name,
and method defaultProps sets default parameters.

class Hello extends Component { static defaultProps() { return { name: 'World' } } render() { return ( 'Hello, ' + this.props.name + '!' ) } }

That's how you can pass parameters to another component:

class Universe extends Component { render() { return ( Hello.v({ name: 'Universe' }) ) } }

Childs

Special property props.childs allows you to combine components with each other.

class Board extends Component { render() { const { div } = html return ( div({ id: 'board' }, this.props.childs ) ) } } const board = Board.v({}, 'Some text!')

Keys

Special property props.key will allow vqua to use a more efficient algorithm for redrawing a DOM tree.

In this example, vqua simply swaps the elements, instead of redrawn the elements.

class Toggler extends Component { constructor(props, context) { super(props, context) this.state = { active: true } } handleClick(event) { event.preventDefault() this.setState({ active: !this.state.active }) } render() { const { div, a, br } = html const first = ( div({ key: 1 }, div({}, 'first' ) ) ) const second = ( div({ key: 2 }, 'second' ) ) const toggle = [ a({ href: '#toggle', onClick: (e) => this.handleClick(e) }, 'Toggle!' ), br(), ] const combination = this.state.active ? [ toggle, second, first ] : [ toggle, first, second ] return combination } }

By the same principle, you can synchronize vqua components:

[ Example.v({ key: 'first' }), Example.v({ key: 'second' }) ]