上下文

Mitosis 上下文必须：

  • 在自己的文件中创建
  • 文件名必须以context.lite.ts结尾
  • 默认导出必须是一个返回上下文对象的函数

示例：

  1. // simple.context.lite.ts
  2. import { createContext } from '@builder.io/mitosis';
  4. export default createContext({
  5.   foo: 'bar',
  6.   get fooUpperCase() {
  7.     return this.foo.toUpperCase();
  8.   },
  9.   someMethod() {
  10.     return this.fooUpperCase.toLowercase();
  11.   },
  12.   content: null,
  13.   context: {} as any,
  14.   state: {},
  15. });

然后，您可以在组件中使用它：

  1. import { setContext, useContext } from '@builder.io/mitosis';
  2. import Context from './simple.context.lite';
  4. export default function ComponentWithContext(props: { content: string }) {
  5.   // 使用 `useContext` 访问上下文
  6.   const foo = useContext(Context);
  8.   // 使用 `setContext` 为上下文提供新值
  9.   setContext(Context, {
  10.     foo: 'baz',
  11.     content() {
  12.       return props.content;
  13.     },
  14.   });
  16.   return (
  17.     // 还可以使用 `Context.provider` 为上下文提供新值
  18.     <Context.Provider value={{ bar: 'baz' }}>{foo.value}</Context.Provider>
  19.   );
  20. }