Question

以下示例位于Preact homepage。我想知道在类花括号=中如何/为什么等于;赋值和分号{}。我用谷歌搜索了几分钟，似乎无法搞清楚。

这是TypeScript还是其他一些花哨的JS堂兄？花括号看起来像常规赋值，而不是类定义。

export default class TodoList extends Component {
    state = { todos: [], text: '' };
    setText = e => {
        this.setState({ text: e.target.value });
    };
    addTodo = () => {
        let { todos, text } = this.state;
        todos = todos.concat({ text });
        this.setState({ todos, text: '' });
    };
    render({ }, { todos, text }) {
        return (
            <form onSubmit={this.addTodo} action="javascript:">
                <input value={text} onInput={this.setText} />
                <button type="submit">Add</button>
                <ul>
                    { todos.map( todo => (
                        <li>{todo.text}</li>
                    )) }
                </ul>
            </form>
        );
    }
}

Answer 1

这些是class instance fields（属性初始值设定项）。它们目前是第2阶段提案。

它们的使用（以及import，export以及JS引擎本身不支持的其他功能）意味着Babel应该用于转换示例。

JS ES6类定义：Preact主页上的示例：我从未见过这个

1 个答案: