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

Question

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

\n

import React, { useContext, useState } from 'react';\nimport logo from './logo.svg';\nimport './App.css';\nimport Search from './components/Search';\n//import CategoriasProvider from './components/Context/CategoriasContext';\nimport Title from './components/Title';\nimport { ListGhostingExample } from '../src/components/DrinkList';\nimport { PrimaryButton } from 'office-ui-fabric-react';\nimport { CategoriasContext,  ICategoriasContextInterface } from './components/Context/CategoriasContext';\nimport CategoriasProvider from './components/Context/CategoriasContext';\nimport axios from 'axios';\nimport './components/DrinkList.css'\nimport './components/Search.css'\n\ninterface IApp{\n  items:ICategoriasContextInterface[],\n  renderList:boolean\n  \n}\n\nconst App =()=> {\n \n  const contextValues=useContext(CategoriasContext);\n  \n  return(\n<CategoriasProvider>\n    <div className="App">\n     \n        <div className="search">\n          <Search name={contextValues?.name} image={contextValues?.image} thumbnail={contextValues?.thumbnail} />\n        </div>\n\n     \n    </div>\n    </CategoriasProvider>\n  );\n}\n\n\nexport default App;\n\n

\n

CategoriasProvider 来自 Context (CategoriasContext.tsx )。CategoryProvider 有上述错误CategoriasProvider 内部有一个 Search.tsx Component.Search 作为“包装器”。代码是：

\n

import React, { useEffect, useState } from 'react';\nimport { SearchBox,ISearchBoxStyles  } from 'office-ui-fabric-react/lib/SearchBox';\nimport { PrimaryButton, IContextualMenuProps, Stack, IStackTokens, StackItem, initializeIcons } from 'office-ui-fabric-react';\nimport { ComboBox, DefaultPalette, Dropdown, DropdownMenuItemType, IComboBoxOption, IDropdownOption, IDropdownStyles, IStackItemStyles, SelectableOptionMenuItemType, Toggle } from '@fluentui/react';\nimport {  getGlassesOriginal } from './Utils/Utils';\nimport axios from 'axios';\nimport '../Search.css';\nimport { CategoriasContext, ICategoriasContextInterface } from './Context/CategoriasContext';\n\ninitializeIcons();\nconst Search = (props:ICategoriasContextInterface) => {\n\n  //State\n  const [textContent, setTextContent] = useState(""); \n  const [textBoxDisabled,disableTextBox]=useState(false);\n  const [comboBoxDisabled,disableComboBox]=useState(true);\n  const CategoriasContextInSearch=React.useContext(CategoriasContext);\n  \n  const setTextContentInstate = (e: any) =>{  \n    console.log("Contenido de e" + e.target.value);\n    setTextContent(e.target.value);  \n}\n\n  const showMessageInConsole = ():void => {\n    \n  console.log(textContent);\n  setTextContent(""); \n\n}\n\n    // Example formatting\n    const stackTokens: IStackTokens = { childrenGap: 20 };\n\n    const searchBoxStyles: Partial<ISearchBoxStyles> = { root: { width: 200 } };\n\n    const dropdownStyles: Partial<IDropdownStyles> = {\n      dropdown: { width: 200 },\n    };\n    \n    const options: IDropdownOption[] = [\n      { key: 'glasses', text: 'Glasses', itemType: DropdownMenuItemType.Header },\n     \n     \n    ];\n   \n    function getGlasses () {\n     \n      let outputArray:string[] = [];\n      console.log("getGlasses");\n      \n  axios\n      .get("https://www.thecocktaildb.com/api/json/v1/1/list.php?g=list")\n      .then((response)=>{\n  \n          let responseDataJson=response.data.drinks;       \n          for (let element in responseDataJson) {    \n            options.push({key:responseDataJson[element].strGlass,text:responseDataJson[element].strGlass});       \n          }\n         }\n              \n  )\n\n  return outputArray;\n  }\n\n \n  function selectSearch(){\n\n \n    if(textBoxDisabled){\n   \n      disableTextBox(false);\n      disableComboBox(true);\n    } else {\n     \n      disableTextBox(true);\n      disableComboBox(false);\n    \n    };\n  }\n   \n   \n    useEffect(() => {\n\n      //TODO: No se deber\xc3\xada llamar siempre a esta funci\xc3\xb3n. Solamente cuando se activa el sistmea de b\xc3\xbasqueda (y adem\xc3\xa1s, cachearlo)\n      getGlasses()\n      \n  \n    });\n\n     \n    return(\n    \n                 <div className="wrapper">\n                   <div className="one"> <Toggle  onClick={selectSearch}/></div>\n                            \n                                \n                                    <div className="two">\n                                    {\n                                      <SearchBox \n                                      name="searchBox"\n                                      className="searchBox"  \n                                      styles={searchBoxStyles} \n                                      placeholder="Cheers!" \n                                      onChange={setTextContentInstate} \n                                      value={textContent}\n                                      disabled={textBoxDisabled}\n                                      />\n                                    }\n                                      </div>\n                                      <div className="three">\n                                      <Dropdown\n                                    placeholder="Select a glass"\n                                    options={options}\n                                    styles={dropdownStyles}\n                                    disabled={comboBoxDisabled}\n                                      />\n                                     \n                                      </div>\n                                      <div className="four">\n                                      <div className="primaryButton">\n                                        <PrimaryButton text="Search"   onClick={showMessageInConsole}/>\n                                        </div>\n\n                                      </div>\n                                      \n                                 \n\n                   </div>\n                    \n                       \n\n                                \n            \n            \n       \n    );\n\n}\n\n \n\nexport default Search;\n

\n

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

\n

Answer 1

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

export const CategoriasProvider = () => {

您定义CategoriasProvider为一个不带 props 的组件。它只能接受IntrinsicAttributes基本上只是财产key。

但是当您使用CategoriasProviderin时App，您将使用 JSX 元素子元素来调用它。你会得到一个错误，因为你没有说该CategoriasProvider组件可以接受一个childrenprop。

以下任何类型都可以解决您的问题：

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组件不会按预期工作，因为访问useContext的挂钩CategoriasContext位于. 它只会获取上下文的默认值——而不是来自提供者的值。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;