Параметры

Каждый компонент имеет свои параметры на вход - props.

В отличии от state, props это статические параметры которые нельзя изменять.

Например этот компонент ожидает от вас параметр name,
а метод defaultProps устаналивает параметры по умолчанию.

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

Вот так можно передать параметры другому компоненту:

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

Дети

Специальный параметр props.childs позволит вам комбинировать компоненты между собой.

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

Ключи

Специальный параметр props.key позволит vqua использовать более эффективный алгоритм перерисовки DOM дерева.

Например в этом примере vqua просто меняет элементы местами, вместо того чтобы заново перерисовать элементы.

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 } }

По такому же принципу вы можете синхронизировать vqua компоненты:

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