写一个react小案例
时间: 2023-03-11 10:17:41 浏览: 85
我可以给你一个简单的React小案例:import React from 'react';const Example = () => {
return (
<div>
<h1>这是一个React小案例</h1>
<p>我们可以在这里写一些React代码。</p>
</div>
);
}export default Example;
相关问题
帮我写一个react three 的小案例
当然可以!下面是一个简单的 React + Three.js 的案例,展示了如何在 React 中创建一个简单的立方体场景:
1. 首先,确保你的项目已经安装了 React 和 Three.js 模块(可以参考上面的步骤)。
2. 创建一个新的 React 组件(例如 CubeScene.js),并添加以下代码:
```jsx
import React, { useEffect, useRef } from 'react';
import * as THREE from 'three';
const CubeScene = () => {
const canvasRef = useRef(null);
useEffect(() => {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: canvasRef.current });
renderer.setSize(window.innerWidth, window.innerHeight);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
const animate = () => {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
}, []);
return <canvas ref={canvasRef} />;
};
export default CubeScene;
```
3. 在你的主组件或页面中导入并渲染 `CubeScene` 组件:
```jsx
import React from 'react';
import CubeScene from './CubeScene';
const App = () => {
return (
<div>
<h1>React + Three.js Cube Scene</h1>
<CubeScene />
</div>
);
};
export default App;
```
4. 运行你的 React 应用程序,你应该能够在页面上看到一个旋转的立方体场景。
这只是一个简单的示例,你可以根据需要对场景进行更多的自定义和扩展。希望这可以帮助到你开始使用 React 和 Three.js 创建有趣的三维场景!
给我写一个react状态提升案例
好的,以下是一个简单的 React 状态提升案例:
假设我们有两个子组件 `A` 和 `B`,它们都需要使用一个共同的变量 `count`,我们可以将 `count` 定义在它们的父组件 `App` 中,然后通过 props 将 `count` 传递给子组件 `A` 和 `B`。
```jsx
import React, { useState } from "react";
function A(props) {
return (
<div>
<p>子组件 A 中的 count 值为:{props.count}</p>
</div>
);
}
function B(props) {
return (
<div>
<p>子组件 B 中的 count 值为:{props.count}</p>
</div>
);
}
function App() {
const [count, setCount] = useState(0);
return (
<div>
<p>父组件中的 count 值为:{count}</p>
<button onClick={() => setCount(count + 1)}>增加 count</button>
<A count={count} />
<B count={count} />
</div>
);
}
export default App;
```
在上面的代码中,我们通过 `useState` 钩子来定义了状态变量 `count`,然后将其传递给了子组件 `A` 和 `B`,这样它们就可以访问到该变量并显示出来。当我们点击父组件中的增加按钮时,`count` 变量的值会更新,并且子组件中的 `count` 值也会相应地更新。
这就是一个简单的 React 状态提升案例,通过这种方式,我们可以将局部变量变成全局变量,并实现在多个组件中共享同一个变量的目的。