react如何调用js
在 React 中调用 JavaScript
React 本身基于 JavaScript，因此可以直接在组件中编写 JavaScript 代码。以下是几种常见场景的调用方式：
内联 JavaScript 逻辑
在组件中直接编写 JavaScript 逻辑，例如条件渲染、事件处理等：
function MyComponent() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1); // JavaScript 逻辑
};
return (
<button onClick={handleClick}>
Clicked {count} times
</button>
);
}调用外部 JavaScript 函数
从外部文件导入 JavaScript 函数并在组件中使用：
// utils.js
export function formatDate(date) {
return new Date(date).toLocaleDateString();
}
// MyComponent.jsx
import { formatDate } from './utils';
function MyComponent() {
return <div>{formatDate('2023-01-01')}</div>;
}使用生命周期方法
在类组件中通过生命周期方法调用 JavaScript：
class MyComponent extends React.Component {
componentDidMount() {
console.log('Component mounted'); // JavaScript 逻辑
}
render() {
return <div>Hello World</div>;
}
}动态执行字符串代码
通过 eval() 或 Function 构造函数执行字符串形式的 JavaScript（需谨慎使用）：
function executeCode() {
const result = eval('2 + 2'); // 返回 4
console.log(result);
}使用 dangerouslySetInnerHTML
在需要渲染 HTML 字符串时使用（注意 XSS 风险）：
function MyComponent() {
const htmlString = '<script>console.log("Executed")</script>';
return <div dangerouslySetInnerHTML={{ __html: htmlString }} />;
}与 DOM API 交互
通过 useEffect 或 useLayoutEffect 调用原生 JavaScript DOM API：
function MyComponent() {
useEffect(() => {
document.title = 'New Title'; // 调用 DOM API
}, []);
return null;
}注意事项
- 避免在渲染过程中直接执行复杂计算，应使用
useMemo或useCallback优化性能 - 谨慎使用
eval()和dangerouslySetInnerHTML，可能引发安全漏洞 - 推荐将业务逻辑与组件分离，保持代码可维护性
