我想根據輸入渲染組件。在這里，我創建了一個根據輸入回傳組件的函式，但它沒有顯示任何內容。我使用了 ant css 框架。這是一個排序可視化代碼。在這里，我首先展示排序可視化器，然后展示演算法及其時間復雜度和空間復雜度。我不想創建新頁面，而是要渲染一個根據輸入更改的組件。我的邏輯是正確的，但它什么也沒顯示。
import React, { useState } from 'react';
import selectionSort from '../../algorithms/selection-sort';
import generateRandomizedArray from '../../helpers/randomizeArray';
import SortingBar from '../SortingBar/SortingBar';
import HomeHeader from '../HomeHeader/HomeHeader';
import '../../index.css';
import bubbleSort from '../../algorithms/bubble-sort';
import insertionSort from '../../algorithms/insertion-sort';
import mergeSortWrapper from '../../algorithms/merge-sort';
import quickSortLWrapper from '../../algorithms/quick-sort-l';
import countingSort from '../../algorithms/counting-sort';
import radixSort from '../../algorithms/radix-sort';
import heapSort from '../../algorithms/heap-sort';
import CodeEditor from '../CodeEdior/CodeEditor';
import {Routes,Route} from 'react-router-dom';
const Home = () => {
const arraySize = 100;
const [isVisualizing, setIsVisualizing] = useState(false);
const [randomizedArray, setRandomizedArray] = useState(
generateRandomizedArray({ arraySize: arraySize })
);
const [colorsArray, setColorsArray] = useState(
new Array(randomizedArray.length).fill(0)
);
const [visualizationSpeed, setVisualizationSpeed] = useState(30);
const [maxItem, setMaxItem] = useState(Math.max(...randomizedArray));
const [currentAlgorithm, setCurrentAlgorithm] = useState('Bubble Sort');
const algorithms = [
'Bubble Sort',
'Insertion Sort',
'Selection Sort',
'QuickSort',
'Merge Sort',
'Counting Sort',
'Radix Sort',
'Heap Sort'
];
const codeEditor = ({algo}) => {
switch(algo){
case"Bubble Sort":
return <CodeEditor/>
default:
break;
}
}
const onRandomize = () => {
if (isVisualizing) return;
const nextRandomizedArray = generateRandomizedArray({
arraySize: randomizedArray.length,
});
setRandomizedArray(nextRandomizedArray);
setMaxItem(Math.max(...nextRandomizedArray));
};
const onInputSizeChanged = (val) => {
if (isVisualizing) return;
const nextRandomizedArray = generateRandomizedArray({ arraySize: val });
setRandomizedArray(nextRandomizedArray);
setMaxItem(Math.max(...nextRandomizedArray));
setColorsArray(new Array(nextRandomizedArray.length).fill(0));
};
const onSpeedChange = (val) => {
if (isVisualizing) return;
setVisualizationSpeed(100 - val 1);
};
const onVisualize = async () => {
if (isVisualizing) return;
setIsVisualizing(true);
switch (currentAlgorithm) {
case 'Selection Sort':
await selectionSort({
array: randomizedArray,
setArray: setRandomizedArray,
visualizationSpeed: visualizationSpeed,
setColorsArray: setColorsArray,
});
break;
case 'Bubble Sort':
await bubbleSort({
array: randomizedArray,
setArray: setRandomizedArray,
visualizationSpeed: visualizationSpeed,
setColorsArray: setColorsArray,
});
break;
case 'Insertion Sort':
await insertionSort({
array: randomizedArray,
setArray: setRandomizedArray,
visualizationSpeed: visualizationSpeed,
setColorsArray: setColorsArray,
});
break;
case 'QuickSort':
await quickSortLWrapper({
array: randomizedArray,
leftIndex: 0,
rightIndex: randomizedArray.length - 1,
setArray: setRandomizedArray,
visualizationSpeed: visualizationSpeed,
setColorsArray: setColorsArray,
});
break;
case 'Merge Sort':
await mergeSortWrapper({
array: randomizedArray,
leftIndex: 0,
rightIndex: randomizedArray.length - 1,
setArray: setRandomizedArray,
visualizationSpeed: visualizationSpeed,
setColorsArray: setColorsArray,
});
break;
case 'Counting Sort':
await countingSort({
array:randomizedArray,
setArray:setRandomizedArray,
visualizationSpeed:visualizationSpeed,
setColorsArray:setColorsArray
});
break;
case 'Radix Sort':
await radixSort({
array:randomizedArray,
setArray:setRandomizedArray,
visualizationSpeed:visualizationSpeed,
setColorsArray:setColorsArray
});
break;
case 'Heap Sort':
await heapSort({
array:randomizedArray,
setArray:setRandomizedArray,
visualizationSpeed:visualizationSpeed,
setColorsArray:setColorsArray
});
break;
default:
break;
}
setIsVisualizing(false);
};
return (
<div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
<HomeHeader
algorithms={algorithms}
onAlgorithmChange={setCurrentAlgorithm}
currentAlgorithm={currentAlgorithm}
onRandomize={onRandomize}
onInputSizeChanged={onInputSizeChanged}
onSpeedChange={onSpeedChange}
onStart={onVisualize}
isVisualizing={isVisualizing}
/>
<div
style={{
backgroundColor: '#0D1929',
display: 'flex',
height: '100%',
width: '100vw',
flexDirection: 'row',
alignItems: 'end',
padding: '0px 0px 0px 0px',
}}
>
{randomizedArray.map((item, index) => {
const height = (item / maxItem) * 100;
const width = (1 / randomizedArray.length) * 100;
return (
<div
key={index}
style={{
height: '100%',
display: 'flex',
alignItems: 'end',
width: `${width}%`,
}}
>
<SortingBar
colorCode={colorsArray[index]}
style={{
height: `calc(${height}% - 20px)`,
width: '100%',
margin: 'auto 10% 0 10%',
}}
></SortingBar>
</div>
);
})}
{ codeEditor(currentAlgorithm)}
{/* insert here */}
</div>
</div>
);
};
export default Home;
這是我的代碼編輯器組件
import { Collapse, Space } from 'antd';
import React from 'react';
const { Panel } = Collapse;
const text = `
A dog is a type of domesticated animal.
Known for its loyalty and faithfulness,
it can be found as a welcome guest in many households across the world.
`;
export default function CodeEditor() {
return (
<Space direction="vertical" style={{marginLeft:'auto', marginRight:'auto', marginTop:'20px',marginDown:'20px'}}>
<Collapse collapsible="icon" defaultActiveKey={['1']}>
<Panel header="This panel can only be collapsed by clicking icon" key="1">
<p>{text}</p>
</Panel>
</Collapse>
</Space>
)
}
uj5u.com熱心網友回復：
您的代碼中有兩個問題：
currentAlgorithm盡管它是一個字串，但您嘗試解構狀態 ( )。- 您不會回傳渲染的組件。
注意：您不需要break在return宣告之后。
顯示代碼片段
const { useState } = React;
const CodeEditor = () => '<CodeEditor/>';
// don't destructure algo
const codeEditor = (algo) => {
switch(algo){
case"Bubble Sort":
return <CodeEditor/> // return
default:
break;
}
}
const Demo = () => {
const [currentAlgorithm, setCurrentAlgorithm] = useState('Bubble Sort');
return (
<div>
{codeEditor(currentAlgorithm)}
</div>
);
}
ReactDOM
.createRoot(root)
.render(<Demo />);<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="root"></div>另一種選擇是轉換codeEditor為組件（EditorSelector），并像標準組件一樣渲染它，并通過選擇器傳遞道具：
顯示代碼片段
const { useState } = React;
const CodeEditor = ({ val }) => (
<div>
value: {val}
</div>
);
const EditorSelector = ({ algo, ...props }) => {
console.log(algo);
switch(algo){
case"Bubble Sort":
return <CodeEditor {...props} />;
default:
return null;
}
}
const Demo = () => {
const [currentAlgorithm, setCurrentAlgorithm] = useState('Bubble Sort');
return (
<div>
<EditorSelector algo={currentAlgorithm} val={1} />
</div>
);
}
ReactDOM
.createRoot(root)
.render(<Demo />);<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="root"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/525638.html
上一篇：如何將引數傳遞給另一個.py