你的情況很好，只需要用div包起來。當傳輸JSX時，它的類型將是object const Comp = ({ children }: any) => { console.log('***', typeof children); return <div>{typeof children === 'function' ? children() : children}</div>;};const Element = () => { return <div> <Comp>{() => <div>Hello</div>}</Comp> <Comp><div>Foo</div></Comp> </div>}const domContainer = document.querySelector('#app');ReactDOM.render(<Element/>, domContainer); <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script><script cros

“清理”所謂的末日金字塔對性能沒有任何好處。有多個層次是完全好的。 在實現下面的代碼之前，請確保不要僅僅因為可以就在全局級別提供上下文。上下文提供程序必須包裝在使用它的組件附近，這意味著不總是在根級別。 也就是說，這里有一個簡單的高階組件，它可以包裝多個提供者以提供Reduxcompose式API。 /** * Check if the object has a property matching the key * NOTE: Works only for shallow objects. * @param object * @param key * @returns {boolean|boolean} */const hasProperty = (object, key) => object ? Object.hasOwnProperty.call(object, key) : false;const hasProps = (arg) => hasProperty(arg, 'provider') && hasProperty(arg, 'props');export const withContextProviders = (...providers) => (Component) => (props) => providers.

您只需通過有條件地渲染即可完成此操作 const ParentComponent = ({data}: {data: Array<DataType>}) => { const version = data.version; //version is an array const type = data.type; //type is an object const renderContent = () => { return ( <Flex flexDirection="column"> {version && version.length ? ( <> <div>version</div> //this to be displayed if version not empty <div>{version}</div> // this to be displayed if version is not empty </> ) : null} {(type.version || type.name) ? ( <> <div>type</div> //this to be shown if type has name or ve

在程序中，app函數必須返回一個JSX代碼。返回JSX時的一個主要標準是它必須包含在標記內。也就是說，您要返回的每一個東西都必須包裝在父元素中。 在這個程序中，您將返回兩個同級標記，而不是單個標記。 你可以通過做， 1. return ( <> <Navbar /> </>); return ( <Navbar />); 并且不要在JSX中使用分號；）

您的值是字符串類型，而不是對象，否則它將打印為[object，object]，因此您需要對對象值進行字符串化 value=JSON.stringify({message:n.message,type:n.type}) 檢查下面的示例 import React, { useState } from 'react';import './style.css';export default function App() { const [val, setVal] = useState(); const changeHandler =value => { console.log(value); setVal(value); }; return ( <div> <select onChange={e => changeHandler(e.target.value)}> <option value={JSON.stringify({value: 'one', type: 'number' })} >none</option> <option value={JSON.stringify({value: 'one', type: 'number' })}>one</option> </select> {v

這是字符串插值。這個特殊的引號>>`<<（azerty鍵盤上的AltGr+7（不是numpad）允許您在正在編寫的字符串中添加條件。它將被解釋并產生一個字符串，其中包含條件的結果。 現在，你的這個條件有點特殊，這是JS的一個技巧，它允許你在不設置else語句的情況下編寫一個三元表達式。如果active為false，則不會嘗試解決第二個條件，這稱為lazy evaluation，請注意這兩個'&'）。所以： className={sidebarOption ${active && 'sidebarOption--active' }} 等于： className={sidebarOption ${active ? 'sidebarOption--active' : '' }} 關于第二個，我寫了三元條件，你可能知道： Boolean ? 'true value' : 'else value' 現在，如果您想以更常見的方式編寫條件(if...else），則必須在函數中外部化字符串構造： const classes = () => { const classString = 'sidebarOption '; if(active) { classString += 'sidebarOption--active'; } return cl

您需要從正在JSX中編寫的函數中返回td's，并按如下方式調用該函數： return ( <div> <table> <tbody> <tr> {(() => { let td = []; for (let i = 1; i <= a; i++) { td.push(<td key={i}>{i}</td>); } return td; })()} </tr> </tbody> </table> </div> ); 呈現它的一種更有效的方法是在JSX之外提取函數 function daysInCurrentMonth() { var now = new Date(); return new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate(); } let a = daysInCurrentMonth(); const renderTD = () => { let td = []; for (let i = 1; i <= a; i++) { td.push(<td key={i}>{i}</td>); } return td; }; return ( &l

這是一個語法錯誤，與React無關，在return語句中，只能返回一個表達式。 return [[expression]]; 你寫的內容類似于： array.map(item => { return (item item) // syntax error}) 因此，對于React，要返回單個值，可以使用React.Fragment： <> <ListItem key={category.Id} button> <ListItemText primary={category.Name} /> </ListItem> {listItem(category.Id)}</>

看你怎么定義 JSX 的范圍了。如果你僅僅指的是形如 JS+XML 這部分擴展語法（這也是 JSX 的得名由來），那確實就基本一樣。但問題是這部分完全一樣又有什么用呢？你最后不還是得依賴 Vue/React 本身提供的 API 去寫組件嗎？到了 API 這個層面，那就變成了 React Hooks API 跟 Vue Composition API 的對比了。但這似乎又已經偏離了 JSX 的范圍。

這是因為JSX不是HTML，在JSX中，您必須將樣式作為對象傳遞，而要使用javascript，我們必須先在{}中放置一個{}，然后在{}中首先將樣式放置在對象中，但樣式鍵應該在這種情況下 Eg: background-color:green=>backgroundColor:'green' const Search = () => { return ( <> <div className="Search"> <form className="Search__form"> <img src="" /> <input type="text" placeholder="&#xF002; Search" style={{fontFamily:"Arial, FontAwesome"}} ></input> <button>Search</button> </form> </div> </> );};

這種模式稱為渲染道具。你可以在這里閱讀更多信息：https://reactjs.org/docs/render-props.html 同時它是這樣的： const Field = (props) => { //this is some data here // in the end you pass the data to childern like a function return props.children(/** HERE IS THE DATA YOU'RE GETTING FROM THAT PROPS WHICH CONFUSED YOU */)} <Field name="myField"> {//THE DATA YOU PASS TO ABOVE CHILDREN YOU GET IT HERE props => ( <div> <input {...props.input} /> </div> )}</Field>

在您的示例中，您將字符串（'boom'）傳遞給audio標記的source屬性。對于JS/React，如果當前作用域的變量包含以特定字符串命名的變量，則不意味著要查找。 有兩種方法可以使這項工作。 您可以更改數據對象的聲音屬性以引用導入的聲音對象（而不是字符串） import boom from './sound/boom.ogg';const data = [ { key: 'Q', keyCode: 81, sound: boom, },]; 如果你在服務器上的“public”文件夾中提供靜態文件，你也可以把音頻文件放在那里。然后用相對路徑得到它。 const data = [ { key: 'Q', keyCode: 81, sound: './boom.ogg', },];

我認為你的問題是關于兩個按鈕行為之間的差異，一個是在單擊以重新渲染父組件后返回到零，另一個不是。 首先，我們應該理解函數組件的life-cycle，渲染器正在執行每個狀態更改。 function App() { /** * it will be executed each render */ return (<div />);} 我們還必須理解創建組件和實例化組件之間的區別。 // this is creating a component const ChildWrapper = () => <Child title="Component" />; // this is instantiating a component const childWrapperJsx = <Child title="jsx" />; 例如，JSX只是一個將這個<Child title="jsx" />的語法轉換為React.createElement('div', { title: "jsx" })的工具。為了更好地解釋，代碼被轉換為如下內容： // this is creating a component const ChildWrapper = () => React.createElement('button', { title: 'C

我認為styleprop只支持一級鍵。從數組轉換為一個字符串似乎可行： let transStyle = { flex: 1, backgroundColor: '#cccc99', width:200, height:200, transform: `perspective(850px) translateX(-30px) rotateY(60deg)`, }

代碼段的最后三行應如下所示： </div> </Images> );} 基本上，您的結束標記div是錯誤的（<div/>而不是</div>）。然后你丟失了</Images>的結束標記。 我建議使用visualstudio代碼及其良好的功能來折疊單個元素。請參閱以下圖片：