0

Сама ошибка:

У типа "{ 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

1 ответ 1

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.