react mobx 语法解析错误 @observable， unexpected token ？？

Question

react mobx 语法解析错误 @observable， unexpected token ？？

发布于
2021-12-09

更新于
2021-12-09

完整代码如下：

<!DOCTYPE html><html>
<head>
    <meta charset="utf-8" />
    <title>react demo</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/mobx/6.3.2/mobx.umd.development.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/mobx-react-lite/3.2.0/mobxreactlite.umd.development.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

</head>
<body>


<div id="app"></div>


<script type="text/babel">


    const { createContext, useState, useContext, useEffect } = React;
    const { Provider, Consumer }=createContext();
    const { observable, action} = mobx;
    const { useLocalStore, observer, Observer } = mobxReactLite;

    class Store {
        @observable   // 这种写法报错
        count = 0;

        @action
        handleCount() {
            this.count += 1;
        }
    }

    const store = new Store();


     const Counter = observer((props) => {
        const store = useLocalStore(() => (
            {
                count: 1,
                get getCount() {
                    return store.count;
                },
                handleCount() {
                    store.count += 2;
                }
            }
        ));
        return (
            <Provider value={store}>
                {props.children}
            </Provider>
        );
    });



    const CounterFunction = observer((props) => {
        const [num, setNum] = useState(10);
        const context = useContext(Counter);

        console.log(context, 'xz100')  // 打印不出来？
        useEffect(() => {
            console.log('num change', Counter);
        }, [num]);

        return (
            <div>
                <p>num: {num}</p>
            </div>
        );
    })

    function App() {
        return (
            <div className="App">
                <Counter>
                     <CounterFunction/>
                </Counter>
            </div>
        );
    }

    ReactDOM.render(
        <App />,
        document.getElementById('app')
    );
</script>


</body>

react mobx--react mobx

阅读 3k

1 个回答

得票最新

tuihou123321

49118112152

发布于
2021-12-09

上面是装饰器写法，需要配置babel,不使用装饰的方法如下

https://cn.mobx.js.org/best/d...

撰写回答