reactjs - Type '{ children: Element; }' har ingen egenskaper til felles med typen 'IntrinsicAttributes' React -typescript Context

Jeg holder for øyeblikket på å kode en React -typescript-app for å øve på FluentUI (også kjent som Fabric). Problemer oppstår med min App.tsx-komponent.

import React, { useContext, useState } from 'react';
import logo from './logo.svg';
import './App.css';
import Search from './components/Search';
//import CategoriasProvider from './components/Context/CategoriasContext';
import Title from './components/Title';
import { ListGhostingExample } from '../src/components/DrinkList';
import { PrimaryButton } from 'office-ui-fabric-react';
import { CategoriasContext,  ICategoriasContextInterface } from './components/Context/CategoriasContext';
import CategoriasProvider from './components/Context/CategoriasContext';
import axios from 'axios';
import './components/DrinkList.css'
import './components/Search.css'

interface IApp{
  items:ICategoriasContextInterface[],
  renderList:boolean
  
}

const App =()=> {
 
  const contextValues=useContext(CategoriasContext);
  
  return(
<CategoriasProvider>
    <div className="App">
     
        <div className="search">
          <Search name={contextValues?.name} image={contextValues?.image} thumbnail={contextValues?.thumbnail} />
        </div>

     
    </div>
    </CategoriasProvider>
  );
}


export default App;

CategoriasProvider kommer fra en Context (CategoriasContext.tsx). CategoriasProvider har den nevnte feilen Inne i CategoriasProvider finnes det en Search.tsx-komponent. Search fungerer som en «wrapper». Koden er:

import React, { useEffect, useState } from 'react';
import { SearchBox,ISearchBoxStyles  } from 'office-ui-fabric-react/lib/SearchBox';
import { PrimaryButton, IContextualMenuProps, Stack, IStackTokens, StackItem, initializeIcons } from 'office-ui-fabric-react';
import { ComboBox, DefaultPalette, Dropdown, DropdownMenuItemType, IComboBoxOption, IDropdownOption, IDropdownStyles, IStackItemStyles, SelectableOptionMenuItemType, Toggle } from '@fluentui/react';
import {  getGlassesOriginal } from './Utils/Utils';
import axios from 'axios';
import '../Search.css';
import { CategoriasContext, ICategoriasContextInterface } from './Context/CategoriasContext';

initializeIcons();
const Search = (props:ICategoriasContextInterface) => {

  //State
  const [textContent, setTextContent] = useState(""); 
  const [textBoxDisabled,disableTextBox]=useState(false);
  const [comboBoxDisabled,disableComboBox]=useState(true);
  const CategoriasContextInSearch=React.useContext(CategoriasContext);
  
  const setTextContentInstate = (e: any) =>{  
    console.log("Contenido de e" + e.target.value);
    setTextContent(e.target.value);  
}

  const showMessageInConsole = ():void => {
    
  console.log(textContent);
  setTextContent(""); 

}

    // Example formatting
    const stackTokens: IStackTokens = { childrenGap: 20 };

    const searchBoxStyles: Partial<ISearchBoxStyles> = { root: { width: 200 } };

    const dropdownStyles: Partial<IDropdownStyles> = {
      dropdown: { width: 200 },
    };
    
    const options: IDropdownOption[] = [
      { key: 'glasses', text: 'Glasses', itemType: DropdownMenuItemType.Header },
     
     
    ];
   
    function getGlasses () {
     
      let outputArray:string[] = [];
      console.log("getGlasses");
      
  axios
      .get("https://www.thecocktaildb.com/api/json/v1/1/list.php?g=list")
      .then((response)=>{
  
          let responseDataJson=response.data.drinks;       
          for (let element in responseDataJson) {    
            options.push({key:responseDataJson[element].strGlass,text:responseDataJson[element].strGlass});       
          }
         }
              
  )

  return outputArray;
  }

 
  function selectSearch(){

 
    if(textBoxDisabled){
   
      disableTextBox(false);
      disableComboBox(true);
    } else {
     
      disableTextBox(true);
      disableComboBox(false);
    
    };
  }
   
   
    useEffect(() => {

      //TODO: No se debería llamar siempre a esta función. Solamente cuando se activa el sistmea de búsqueda (y además, cachearlo)
      getGlasses()
      
  
    });

     
    return(
    
                 <div className="wrapper">
                   <div className="one"> <Toggle  onClick={selectSearch}/></div>
                            
                                
                                    <div className="two">
                                    {
                                      <SearchBox 
                                      name="searchBox"
                                      className="searchBox"  
                                      styles={searchBoxStyles} 
                                      placeholder="Cheers!" 
                                      onChange={setTextContentInstate} 
                                      value={textContent}
                                      disabled={textBoxDisabled}
                                      />
                                    }
                                      </div>
                                      <div className="three">
                                      <Dropdown
                                    placeholder="Select a glass"
                                    options={options}
                                    styles={dropdownStyles}
                                    disabled={comboBoxDisabled}
                                      />
                                     
                                      </div>
                                      <div className="four">
                                      <div className="primaryButton">
                                        <PrimaryButton text="Search"   onClick={showMessageInConsole}/>
                                        </div>

                                      </div>
                                      
                                 

                   </div>
                    
                       

                                
            
            
       
    );

}

 

export default Search;

Håper du kan hjelpe meg!!! Takk på forhånd!

Svar #1

Koden som forårsaker feilen i tittelen din, er i kommentaren din. Det er denne linjen:

export const CategoriasProvider = () => {

Du definerer CategoriasProvider som en komponent som ikke tar noen props. Den kan bare akseptere IntrinsicAttributes, som i bunn og grunn bare er key-egenskapen.

Men når du bruker CategoriasProvider i App, kaller du det med JSX-elementbarn. Du får en feil fordi du ikke har sagt at CategoriasProvider-komponenten kan akseptere en children-prop.

Hvilken som helst av følgende typer vil løse problemet ditt:

export const CategoriasProvider: React.FC = ({children}) => {

export const CategoriasProvider = ({children}: {children: React.ReactNode}) => {

export const CategoriasProvider = ({children}: React.PropsWithChildren<{}>) => {

Uansett vil du ønske å sende children videre som barn av den indre Provider-komponenten.

return (
  <CategoriasContext.Provider value={hola}>
    {children}
  </CategoriasContext.Provider>
);

Din App-komponent kommer ikke til å fungere som forventet fordi useContext-hooken som får tilgang til CategoriasContext er plassert utenfor CategoriasProvider. Den vil bare få standardverdien for konteksten - ikke verdien fra provideren.

Du må omorganisere komponentene dine slik at kall til hooken skjer i en komponent som rendres inne i CategoriasProvider.

Prøv dette:

const Search = () => {
  const contextValues = useContext(CategoriasContext);

  return (
    <div className="search">
      <Search
        name={contextValues?.name}
        image={contextValues?.image}
        thumbnail={contextValues?.thumbnail}
      />
    </div>
  );
};

const App = () => {
  return (
    <CategoriasProvider>
      <div className="App">
        <Search />
      </div>
    </CategoriasProvider>
  );
};

export default App;