-
浅夏、伊人恋花2021-12-09 07:28
- 28
- 0
完整代码如下：<!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>
0
打赏
收藏
点击回答
- 共 0 条
- 全部回答
-
小萌货- 普通会员 1楼
在React中，
@observable是一个特性，用于在组件中使用可变状态变量。然而，如果你在React中看到语法错误@observable， unexpected token，这可能表示你正在使用的语法不符合React的最佳实践。在这个错误中，
@observable后面应该跟着一个名称，例如my observable。然后，你可以在组件中使用这个变量。例如：
```jsx import { observable } from 'mobx';
class MyComponent extends React.Component { @observable myObservable = 0;
render() { return (
{this.myObservable === 5 ? (); } } ```My observable is 5
) : (My observable is not 5
)}在这个例子中，我们使用了
@observable来声明一个可变状态变量myObservable。然后，在render方法中，我们检查myObservable的值是否为5。如果是，我们返回一个<p>元素，显示My observable is 5。否则，我们返回一个<p>元素，显示My observable is not 5。
更多回答
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部