类型'{孩子：元素； }' 与类型 'IntrinsicAttributes' React -typescript Context 没有共同的属性

Question

我目前正在编写一个用于练习 FluentUI（又名 Fabric）的 React -typescript 应用程序。出现问题 使用我的 App.tsx 组件。

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 来自一个上下文（CategoriasContext.tsx）。 CategoriasProvider 有提到的错误 在 CategoriasProvider 内部有一个 Search.tsx Component.Search 作为“包装器”工作。代码是：

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;

希望你能帮助我！！！提前致谢！

Answer 1

导致标题错误的代码在您的评论中。就是这一行：

export const CategoriasProvider = () => {

您将CategoriasProvider 定义为不带任何道具的组件。它只能接受IntrinsicAttributes 这基本上只是key 属性。

但是，当您在 App 中使用 CategoriasProvider 时，您将使用 JSX 元素子元素调用它。你得到一个错误是因为你没有说CategoriasProvider 组件可以接受一个children 属性。

以下任何一种都可以解决您的问题：

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

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

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

无论如何，您都希望将 children 作为内部 Provider 组件的子级向下传递。

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

---

您的App 组件无法按预期工作，因为访问CategoriasContext 的useContext 挂钩位于CategoriasProvider 的外部。它只会获取上下文的默认值——而不是来自提供者的值。

您需要重新排列您的组件，以便钩子调用发生在呈现在 CategoriasProvider 内部的组件中。

试试这个：

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;