react-cursor is an opinionated javascript implementation of the Cursor concept first seen in Om, and inspired by functional zippers.

示例代码:

var App = React.createClass({
    getInitialState: function () {
        return {
            "a": 10,
            "b": {
                "foo": {
                    "bar": 42,
                    "baz": ['red', 'green']
                }
            }
        };
    },
    render: function () {
        return 
{JSON.stringify(this.state, undefined, 2)}
;
    }
});

var Cursor = require('path/to/react-cursor').Cursor;

var cursor = Cursor.build(this) // `this` is the React component's this pointer
                                // or the return value of React.renderComponent

                                cursor.refine('a').value            //=> 10
cursor.refine('a').onChange(11);
cursor.refine('b').refine('foo').value      //=> { 'bar': 42, 'baz': ['red', 'green'] }
cursor.refine('b').refine('foo').onChange({ 'bar': 43, 'baz': ['red', 'green'] })
cursor.refine('b', 'foo', 'baz', 1).onChange('blue')

您可能感兴趣的文章: