かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

Visual Studio上のTypeScript JSXを使ってReact.js「デフォルトのプロパティ」

JSXとかだとgetDefaultPropsというメソッドを定義しておくとプロパティのデフォルト値として使ってくれるんですがTypeScriptの場合違うらしい。

どうやるかというと、デフォルト値がほしいプロパティの定義に?をつけて必須じゃなくしてから、public static defaultPropsという感じのstaticなプロパティを定義するという感じでやるみたいです。こんな感じ。

/// <reference path="typings/tsd.d.ts" />

interface ToggleComponentProperties {
    text?: string;
}

interface ToggleComponentState {
    visible: boolean;
}

class ToggleComponent extends React.Component<ToggleComponentProperties, ToggleComponentState> {
    public static defaultProps: ToggleComponentProperties = { text: "Default!!" }

    constructor(props: ToggleComponentProperties) {
        super(props);
        this.state = { visible: true } as ToggleComponentState;
    }

    handleClick(): boolean {
        this.setState({ visible: !this.state.visible } as ToggleComponentState);
        return false;
    }

    render() {
        var header = <h1 className='header'>{this.props.text}</h1>;
        var button = <button onClick={this.handleClick.bind(this) }>Toggle!</button>;

        if (this.state.visible) {
            return <section>
                    {header}
                    {button}
                </section>;
        }

        return <section>{button}</section>;
    }
}

ReactDOM.render(
    <ToggleComponent />,
    document.getElementById('content'));