框架

属性传递

Component 中携带的属性，有可能有一些是 UI 相关的（比如：动画速度等），需要传递到 UIComponent 中。我们提供了特定的属性前缀 wv- 来实现这个功能。

import { Component } from "@qnpm/yis";

export default class Test extends Component {
    displayName = "Test";

    render() {
        return (
            <div wv-xxx={this.props.xxx}></div>
        )
    }
}

在 Component 的最外层节点中设置 wv-属性名，然后在 UIComponent 中通过 props 来接收。当属性发生变化的时候，会自动同步到 UIComponent 中。

代码节选自：/src/componets/test/browser.js

import { UIComponent } from '@qnpm/yis';

@YISComponent.UI('Test')
export default class Test extends UIComponent {
    constructor(props) { console.log(props.xxx) }
    componentWillMount({vnode}) { }
    componentDidMount({props, vnode}) { console.log(props.xxx) }
    componentWillUpdate({nextProps, vnode}) { console.log(nextProps.xxx) }
    componentDidUpdate({props, vnode}) { console.log(props.xxx) }
    componentWillUnmount({vnode}) { }
}