Как сделать компонент, который может включать дочерние tsx (SOLID framework)

Рейтинг: 0Ответов: 1Опубликовано: 07.03.2023

Сама ошибка:

У типа "{ children: (string | Element)[]; }" нет общих свойств с типом "IntrinsicAttributes".

Сам код .tsx :

import { type } from 'os'
import type { Component } from 'solid-js'
import {  } from 'solid-js'


const MainGrid: Component = ( ) => {
  return (
    <div class="main-grid"></div>
  )
}


const App: Component = () => {
  return (
    <MainGrid> // ошибка
      <div class="browser">
        <div class='bg-blue-400'>menu</div>
        <div class='text-input' id='editor' contentEditable></div>
      </div>
    </MainGrid>
  )
}

export default App

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

Изменения:

Новый код (проблема ушла, но правильно ли я сделал не знаю и, если правильно, не знаю можно ли лучше/правильнее)

import { type } from 'os'
import type { Component, FlowProps } from 'solid-js' // добавил
import {  } from 'solid-js'

// помогли генерики 
const MainGrid: Component<FlowProps> = (props) => {
  return (
    <div class="main-grid">{props.children}</div>
  )
}

//тут немного отличается всего 2 новыми дивами
const App: Component = () => {
  return (
    <MainGrid>
      <div>explorer</div>
      <div class="browser">
        <div class='bg-blue-400'>menu</div>
        <div class='text-input' id='editor' contentEditable></div>
      </div>
      <div>atrr</div>
    </MainGrid>
  )
}

export default App
typescript jsx solidjs
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Итак, нарыл все-таки. Для компонентов, которые будут иметь в себе дочерние компоненты (или элементы, или ноды кому как удобнее), нужно использовать тип ParentComponent. Сам я почему-то его не заметил)

Может пригодится: https://github.com/solidjs/solid-docs/blob/main/langs/en/guides/typescript.md

В общем код выглядит так:

import { type } from 'os'
import type { Component, ParentComponent } from 'solid-js' // добавил тип
import {  } from 'solid-js'

// теперь свойство `children` есть у пропсов
const MainGrid: ParentComponent = (props) => {
  return (
    <div class="main-grid">{props.children}</div>
  )
}

const App: Component = () => {
  return (
    <MainGrid>
      <div>explorer</div>
      <div class="browser">
        <div class='bg-blue-400'>menu</div>
        <div class='text-input' id='editor' contentEditable></div>
      </div>
      <div>atrr</div>
    </MainGrid>
  )
}

export default App

Все работает как надо.