unsupported-syntax
React Compiler ஆதரிக்காத syntax-ஐ எதிர்த்து validate செய்கிறது. தேவையெனில், standalone utility function போன்ற React-க்கு வெளியே இந்த syntax-ஐ இன்னும் பயன்படுத்தலாம்.
விதி விவரங்கள்
Optimizations apply செய்ய React Compiler உங்கள் code-ஐ statically analyze செய்ய வேண்டும். eval மற்றும் with போன்ற அம்சங்கள் compile time-இல் code என்ன செய்கிறது என்பதை statically புரிந்து கொள்வதை சாத்தியமற்றதாக்குகின்றன; எனவே அவற்றைப் பயன்படுத்தும் components-ஐ compiler optimize செய்ய முடியாது.
செல்லாதது
இந்த விதிக்கான தவறான code உதாரணங்கள்:
// ❌ Using eval in component
function Component({ code }) {
const result = eval(code); // Can't be analyzed
return <div>{result}</div>;
}
// ❌ Using with statement
function Component() {
with (Math) { // Changes scope dynamically
return <div>{sin(PI / 2)}</div>;
}
}
// ❌ Dynamic property access with eval
function Component({propName}) {
const value = eval(`props.${propName}`);
return <div>{value}</div>;
}செல்லுபடியாகும்
இந்த விதிக்கான சரியான code உதாரணங்கள்:
// ✅ Use normal property access
function Component({propName, props}) {
const value = props[propName]; // Analyzable
return <div>{value}</div>;
}
// ✅ Use standard Math methods
function Component() {
return <div>{Math.sin(Math.PI / 2)}</div>;
}Troubleshooting
Dynamic code-ஐ evaluate செய்ய வேண்டும்
User வழங்கிய code-ஐ evaluate செய்ய வேண்டியிருக்கலாம்:
// ❌ Wrong: eval in component
function Calculator({expression}) {
const result = eval(expression); // Unsafe and unoptimizable
return <div>Result: {result}</div>;
}அதற்கு பதிலாக பாதுகாப்பான expression parser ஒன்றைப் பயன்படுத்துங்கள்:
// ✅ Better: Use a safe parser
import {evaluate} from 'mathjs'; // or similar library
function Calculator({expression}) {
const [result, setResult] = useState(null);
const calculate = () => {
try {
// Safe mathematical expression evaluation
setResult(evaluate(expression));
} catch (error) {
setResult('Invalid expression');
}
};
return (
<div>
<button onClick={calculate}>Calculate</button>
{result && <div>Result: {result}</div>}
</div>
);
}