#3522999 writeup on theme limitations
1 unresolved thread
1 unresolved thread
Closes #3522999
Merge request reports
Activity
added 16 commits
-
7743d609...ccbae46e - 14 commits from branch
project:0.x
- 48d3b0ba - Merge remote-tracking branch 'origin/0.x' into 3522999-document-use-cases
- 2986da91 - edits
-
7743d609...ccbae46e - 14 commits from branch
359 359 ]; 360 360 } 361 361 ``` 362 ### 3.5 Limitations / Tradeoffs 363 We've already established this system makes it possible to render Drupal render arrays with React. This makes it possible to use existing Drupal core functionality as if it were rendered by Twig. As powerful as this is, this isn't a 100% seamless solution. There are some limitations to be aware of: 364 #### 3.5.1 Radix 365 Radix in the field widget React components might be the largest contributor to the complexity of this system. Radix components are structured differently than Drupal's default Twig templates. Some examples of this added complexity: 366 - A Radix text input component has no way to directly apply attributes to a native `<input>` element. Props are only added to input's wrapping div. This means Drupal JS might be looking for `input[attribute]` selectors that don't exist. To get around this, we assign a ref to the Radix component and use Vanilla JS to transfer the attributes to the input element after the component renders. Because there are scenarios where the ref must be passed to multiple components, it's not possible to use refs as functions - which means this approach necessitates additional `useEffect `hooks. This is all additional complexity solely due to the Radix-related deviation from Drupal's default twig templates. changed this line in version 5 of the diff
Reads great!
One part that confused me but maybe its a React thing I'm not aware of. But would appreciate a sentence or some words explaining what is meant by using ref as a function and what the alternative to that then is for passing it to multiple components (assuming multiple components here means going down the layers of
wrapper drupal component for element -> xb component for element -> radix component for element
)Edited by Harumi Jangadded 28 commits
-
eb64166e...936ee9e7 - 25 commits from branch
project:0.x
- 13caa2fa - Merge remote-tracking branch 'origin/0.x' into 3522999-document-use-cases
- c024fbde - fb
- 63facd66 - Merge remote-tracking branch 'origin/0.x' into 3522999-document-use-cases
Toggle commit list-
eb64166e...936ee9e7 - 25 commits from branch
- Resolved by Harumi Jang
- Resolved by Harumi Jang
- Resolved by Harumi Jang
Please register or sign in to reply