Контекст динамической упаковки SolidJs не загружается перед его дочерними элементами

Это ожидаемое поведение, поскольку Solid позволяет вам контролировать порядок выполнения, используя структуру компонента + методы получения. Другими словами, вам решать сначала выполнить дочерние элементы или сначала родительские, хотя немного сложно понять логику выполнения, поскольку скомпилированный код создает замыкание и вызывает методы рендеринга, которые вызывают эффекты рендеринга, которые будут выполняться планировщиком. .

Однажды я открыл проблему на эту же тему, думая, что отсутствие детерминированного порядка рендеринга — это ошибка. Подробнее об этом можно прочитать: https://github.com/solidjs/solid/issues/1997

Вы можете увидеть ответ о том, как его решить: https://stackoverflow.com/a/76995880/7134134

Поставщик контекста — это обычный компонент. Как только вы поймете, как отображаются компоненты, вы сможете контролировать порядок их выполнения. Вы можете узнать больше о Context API: https://stackoverflow.com/a/74492899/7134134

PS: ОП отметил свой ответ как принятый в предоставленном ответе. Вам нужно прочитать связанный ответ. Это точно такая же проблема. Поставщик контекста выполняется первым, поэтому вы получаете значение undefined. Возврат поставщика контекста и использование его в качестве дочернего компонента дают разные результаты.

Я вижу, что ваша цель — установить значение контекста внутри компонента For, но это вынуждает вас вернуть компонент поставщика, что дает другой результат.

Правильный способ предоставления значения контекста — сохранить получателя в качестве дочернего элемента:

 <UserContext.Provider value = {1}><Child /></UserContext.Provider>

Проблема с вашим кодом заключается в том, что порядок выполнения меняется несколько раз во время выполнения дерева компонентов, что приводит к результату, который трудно обосновать.

Вот что выдает ваш код:

import { template as _$template } from "solid-js/web";
import { insert as _$insert } from "solid-js/web";
import { createComponent as _$createComponent } from "solid-js/web";
var _tmpl$ = /*#__PURE__*/_$template(`<div>I am child `);
import { For, createContext, useContext } from 'solid-js';
import { render } from 'solid-js/web';
export const UserContext = createContext(0);
const ParentComponent = props => {
  console.info('Parent');
  return _$createComponent(For, {
    get each() {
      return props.children;
    },
    children: (child, idx) => {
      console.info('child in for:' + idx());
      return _$createComponent(UserContext.Provider, {
        get value() {
          return idx();
        },
        children: child
      });
    }
  });
};
const Child = () => {
  const idx = useContext(UserContext);
  console.info('child', idx);
  return (() => {
    var _el$ = _tmpl$(),
      _el$2 = _el$.firstChild;
    _$insert(_el$, idx, null);
    return _el$;
  })();
};
function App() {
  console.info('App');
  return _$createComponent(UserContext.Provider, {
    value: 0,
    get children() {
      return _$createComponent(ParentComponent, {
        get children() {
          return [_$createComponent(Child, {}), _$createComponent(Child, {}), _$createComponent(Child, {})];
        }
      });
    }
  });
}
render(() => _$createComponent(App, {}), document.body);

Живая демоверсия: https://playground.solidjs.com/anonymous/79dd68ec-79bc-45f7-9076-464fe74d45ae

Вот как вы можете это сделать:

import { type Component, For, type JSXElement, createContext, useContext } from 'solid-js';
import {render } from 'solid-js/web';

export const UserContext = createContext(0);

const ParentComponent: Component<{ children: Array<JSXElement> }> = props => {
  console.info('Parent');
  return (
    <For each = {props.children}>
      {(child, idx) => {
        console.info('child in for:' + idx());
        return child
      }}
    </For>
  );
};

const Child: Component<any> = () => {
  const idx = useContext(UserContext);
  console.info('child', idx);
  return <div>I am child {idx}</div>;
};


function App() {
  console.info('App');
  return (
    <ParentComponent>
      <UserContext.Provider value = {1}><Child /></UserContext.Provider>
      <UserContext.Provider value = {2}><Child /></UserContext.Provider>
      <UserContext.Provider value = {3}><Child /></UserContext.Provider>
    </ParentComponent>
  );
}
render(() => <UserContext.Provider value = {0}><App /></UserContext.Provider>, document.body);

Живая демо: https://playground.solidjs.com/anonymous/2197fa8f-fbe0-40f5-a18c-deb54280bb7e

Скомпилированный код для приведенного выше примера:

import { template as _$template } from "solid-js/web";
import { insert as _$insert } from "solid-js/web";
import { createComponent as _$createComponent } from "solid-js/web";
var _tmpl$ = /*#__PURE__*/_$template(`<div>I am child `);
import { For, createContext, useContext } from 'solid-js';
import { render } from 'solid-js/web';
export const UserContext = createContext(0);
const ParentComponent = props => {
  console.info('Parent');
  return _$createComponent(For, {
    get each() {
      return props.children;
    },
    children: (child, idx) => {
      console.info('child in for:' + idx());
      return child;
    }
  });
};
const Child = () => {
  const idx = useContext(UserContext);
  console.info('child', idx);
  return (() => {
    var _el$ = _tmpl$(),
      _el$2 = _el$.firstChild;
    _$insert(_el$, idx, null);
    return _el$;
  })();
};
function App() {
  console.info('App');
  return _$createComponent(ParentComponent, {
    get children() {
      return [_$createComponent(UserContext.Provider, {
        value: 1,
        get children() {
          return _$createComponent(Child, {});
        }
      }), _$createComponent(UserContext.Provider, {
        value: 2,
        get children() {
          return _$createComponent(Child, {});
        }
      }), _$createComponent(UserContext.Provider, {
        value: 3,
        get children() {
          return _$createComponent(Child, {});
        }
      })];
    }
  });
}
render(() => _$createComponent(UserContext.Provider, {
  value: 0,
  get children() {
    return _$createComponent(App, {});
  }
}), document.body);

Я задал вопрос в репозитории Solid на GitHub (https://github.com/solidjs/solid/discussions/2233) и получил ответ о том, как решить эту проблему.

Быстрый ответ на обходной путь — использование этого шаблона:

1. Дочерний компонент просто возвращает объект реквизита вместо элемента DOM, например null. Вместо того, чтобы пытаться получить некоторые реквизиты от дочернего «элемента», дочерний элемент сам будет реквизитом или любым другим объектом, возвращаемым Child.
2. родитель будет иметь полный доступ к детям. используя эту информацию, мы можем создавать совершенно новых детей.

код будет таким:

import { createContext, For, children as Children } from 'solid-js';
export const UserContext = createContext(0);

function App() {
    return (
        <>
            <ParentComponent width = {100}>
                <Child width = {5}>child1</Child>
                <Child width = {3}>child2</Child>
                <Child width = {2}>child3</Child>
            </ParentComponent>
        </>
    );
}

export default App;

export const ParentComponent = props => {
    const c = Children(() => props.children).toArray();
    const totalWidths = c.reduce((acc, child) => acc + child.width, 0);

    return (
        <For each = {c}>
            {(child, idx) => {
                const width = (child.width * props.width) / totalWidths; 
                return (
                    <ChildRender idx = {idx} width = {width}>
                        {child.children}
                    </ChildRender>
                );
            }}
        </For>
    );
};

export const Child = props => {
    return props;
};

const ChildRender = ({ width, idx, children }) => {
    return (
        <div>
            Child {idx} width {width} - {children}
        </div>
    );
};

и я вижу ожидаемый результат

Child 0 width 50 - child1
Child 1 width 30 - child2
Child 2 width 20 - child3

использование контекста также работает с этим шаблоном:

import './App.css';
import { createContext, useContext, For, children as Children } from 'solid-js';
export const UserContext = createContext({ width: 0, idx: -1 });

function App() {
    return (
        <>
            <ParentComponent width = {100}>
                <Child width = {5}>child1</Child>
                <Child width = {3}>child2</Child>
                <Child width = {2}>child3</Child>
            </ParentComponent>
        </>
    );
}

export default App;

export const ParentComponent = props => {
    const c = Children(() => props.children).toArray();
    const totalWidths = c.reduce((acc, child) => acc + child.width, 0);

    return (
        <For each = {c}>
            {(child, idx) => {
                const width = (child.width * props.width) / totalWidths; 
                return (
                    <UserContext.Provider value = {{ width, idx }}>
                        <ChildRender>{child.children}</ChildRender>
                    </UserContext.Provider>
                );
            }}
        </For>
    );
};

export const Child = props => {
    return props;
};

const ChildRender = ({ children }) => {
    const { width, idx } = useContext(UserContext);
    return (
        <div>
            Child {idx} width {width} - {children}
        </div>
    );
};