day55（reactJS）关于环境变量的介绍关于props的使用关于组建通信的介绍及使用

最新推荐文章于 2024-06-10 09:30:00 发布

李中豪前端大佬

最新推荐文章于 2024-06-10 09:30:00 发布

阅读量667

点赞数 9

文章标签： react.js 前端前端框架 typescript

本文链接：https://blog.csdn.net/weixin_69145757/article/details/136523485

版权

关于环境变量的介绍关于props的使用关于组建通信的介绍及使用

关于环境变量的介绍
关于props的使用
关于组建通信的介绍及使用

关于环境变量的介绍

1. 请求的url分为绝对路径和相对路径

绝对路径

协议名称+ip+端口+web项目名称，使用该路径时，请求无需走代理，可以直接访问到目标服务器，
但是容易出现跨域问题，例如：http://127.0.0.1:3000/api/pro/catelist

相对路径

不包含协议名称、ip、端口的单纯路径，例如：/api/pro/catelist，在不写ip和端口的情况下默认
将请求发送到本机本端口，需要配置服务器请求代理才能将请求转到目标服务器

2. 环境变量可以用于存储在开发和生产环境下不同的请求前缀（设置好之后会自动更换，不需要打包时手动更改。）

设置步骤

（在vue中设置环境变量文件名和位置完全相同，变量名要改成：VUE_APP-BASE_URL）
    1. .env.test（测试环境）文件
    2. 文件中书写：REACT_APP_BASE_URL="给定前缀"（此处REACT_APP为固定前缀，BASE_URL为
       变量名）
    3. 在axios实例化的文档中，将基准路径设置为：
        baseURL:process.env.REACT_APP_BASE_URL
    5. 将请求封装函数或者请求中的url地址前缀全部去掉
    6. 将设置服务器请求代理的文档中，代理前缀设置成：process.env.REACT_APP_BASE_URL
    7. 设置完需要重启项目

补充

react的静态资源路径配置：在package.json文件中给大对象添加直接子元素："homepage":"./"

关于props的使用

1. 父组件对于子组件内容区（标签之间）的传值通过this.props中的children属性接收
2. react提供了一个Children组件，使用时需要引入，该组件提供了map，count，forEach等方法可用于处理父组件传来的元素（内容）
3. count方法用于返回父组件传入元素的数量，但是注释不计数
4. react框架中也有ref属性，该属性作用与vue框架中相同，可以用来获取子组件实例并调用其方法和属性
	   步骤：
		    1. 子组件标签上添加：ref="实例名称"
		    2. this.refs.实例名称.属性或方法
5. react中阻止事件冒泡，与原生js中相同：e.stopPropagation()
6. 获取dom节点还有一个方法：findDomNode()方法，该方法react提供，需要引入，该方法只能获取当前组件最外层根节点，不好用（该方法调用时不加this）

关于组建通信的介绍及使用

父组件对子组件传值

    1. 父组件在子组件标签身上绑定自定义属性传值：<子组件标签 属性名={属性值}></子组件标
       签>
    2. 子组件通过this.props.属性名获取属性值：this.props.属性名
    
 代码演示：：：
    1.在父组件中定义子组件，并为子组件设置 props：
	    import React from 'react';
		import ChildComponent from './ChildComponent';
		
		const ParentComponent = () => {
		  const name = 'Alice';
		  const age = 25;
		  return <ChildComponent name={name} age={age} />;
		};
		
		export default ParentComponent;
	2.子组件接收父组件传递的值：
		import React from 'react';
		const ChildComponent = (props) => {
		  return (
		    <div>
		      <p>Name: {props.name}</p>
		      <p>Age: {props.age}</p>
		    </div>
		  );
		};
		export default ChildComponent;

子组件对父组件传值

    1. 父组件内定义一个有参函数，通过在子组件身上绑定自定义属性将该函数传递给子组件
    2. 子组件用this.props.属性名接收该函数，并将该函数在适当的时机回调调用，给父组件传
       值（比如可以绑定给事件体）

  代码演示：：：
  	1.在父组件中定义一个回调函数 handleDataFromChild，用于接收子组件传递的值：
	  	import React, { useState } from 'react';
		import ChildComponent from './ChildComponent';
		const ParentComponent = () => {
		  const [message, setMessage] = useState('');
		  // 定义回调函数，用于接收子组件传递的值
		  const handleDataFromChild = (data) => {
		    setMessage(data);
		  };
		
		  return (
		    <div>
		      <p>Message from child: {message}</p>
		      {/* 将回调函数作为 props 传递给子组件 */}
		      <ChildComponent sendDataToParent={handleDataFromChild} />
		    </div>
		  );
		};
		export default ParentComponent;

	2.在子组件中调用父组件传递的回调函数 sendDataToParent 来向父组件传递值：
		import React from 'react';
		const ChildComponent = (props) => {
		  const sendDataToParent = () => {
		    // 调用父组件传递的回调函数，并传递值
		    props.sendDataToParent('Hello from child!');
		  };
		
		  return (
		    <div>
		      <button onClick={sendDataToParent}>Send Message to Parent</button>
		    </div>
		  );
		};
		export default ChildComponent;

兄弟组件传值

兄弟组件之间传递值通常需要通过它们的共同父组件来实现。一种常见的方法是将共享的数据状态
提升到它们的最近共同祖先组件中，然后通过 props 将数据传递给需要的子组件
    1. Node modules提供一个第三方库：event，创建一个文件将该库引入并实例化（需要引入
        event库中提供的eventEmitter方法），然后将其实例化对象导出
      1. import { eventEmitter } from 'event';
      2. export default new eventEmitter();
    2. 分别在需要传值和收值的两个组件引入该实例，在传值组件用实例调用其emit方法并传值：
        event.emit('自定义事件名',需要传的值)，在收值组件用其实例调用on方法并设置回调
        函数收值：event.on('自定义事件名',回调函数)，最后需要用off方法在组件卸载期的钩
        子函数中取消监听：event.off('自定义事件名',回调函数)

代码演示：：：
	1.在父组件中定义共享的状态，并将状态和更新状态的函数作为 props 传递给兄弟组件：
		import React, { useState } from 'react';
		import FirstSiblingComponent from './FirstSiblingComponent';
		import SecondSiblingComponent from './SecondSiblingComponent';
		
		const ParentComponent = () => {
		  const [sharedValue, setSharedValue] = useState('');
		
		  return (
		    <div>
		      <FirstSiblingComponent sharedValue={sharedValue} setSharedValue={setSharedValue} />
		      <SecondSiblingComponent sharedValue={sharedValue} />
		    </div>
		  );
		};
		
		export default ParentComponent;
		
	2.第一个兄弟组件通过 props 接收共享的值和更新值的函数，并根据需要修改共享的值：
		import React from 'react';
	
		const FirstSiblingComponent = ({ sharedValue, setSharedValue }) => {
		  const handleInputChange = (e) => {
		    setSharedValue(e.target.value);
		  };
		
		  return (
		    <div>
		      <input type="text" value={sharedValue} onChange={handleInputChange} />
		    </div>
		  );
		};
		
		export default FirstSiblingComponent;

	3.第二个兄弟组件直接通过 props 接收共享的值，无需修改值：
		import React from 'react';
	
		const SecondSiblingComponent = ({ sharedValue }) => {
		  return (
		    <div>
		      <p>Shared Value: {sharedValue}</p>
		    </div>
		  );
		};
		
		export default SecondSiblingComponent;
		
父组件 ParentComponent 中包含了两个兄弟组件 FirstSiblingComponent 和 SecondSiblingComponent。父组件维护了共享的状态 sharedValue，并将这个状态和更新状态的函数 setSharedValue 作为 props 分别传递给两个兄弟组件。

第一个兄弟组件 FirstSiblingComponent 中可以修改共享的值，而第二个兄弟组件 SecondSiblingComponent 则只需要读取共享的值

跨组件传值

跨组件通信可以通过使用 Context API 或第三方状态管理库（如 Redux、MobX）来实现。

    1. 新建context.js文件，从react中导入createContext方法，调用方法创建上下文通信实例对象并默认导出
    2. 将实例化对象导入负责传值的父组件，在父组件中用上下文通信对象的<context.Provider></context.Provider>包裹需要传值的子组件，然后给该组件标签加上value属性，属性值为需要传出的值
    3. 将实例化对象导入负责收值的内层子组件，在子组件的类组件函数外部中用组件实例结合上下文通信对象与外层建立连接：子组件实例名.contextType = 引入的上下文通信对象（注意这句话需要写在类组件函数外部，这里的子组件实例是组件实例的名字，不是this）
    4. 在子组件内部的类组件函数里面，通过this.context调用收到的值（不能传对象）（此处this.context是固定语法，不受引入的通信对象名称影响）

代码演示：：：
	1.创建 Context 对象
		// AppContext.js
		import { createContext } from 'react';
		
		const AppContext = createContext();
		
		export default AppContext;

	2.最顶层的父组件 ParentComponent
		// ParentComponent.js
		import React, { useState } from 'react';
		import AppContext from './AppContext';
		import ChildComponentA from './ChildComponentA';
		import ChildComponentB from './ChildComponentB';
		
		const ParentComponent = () => {
		  const [sharedData, setSharedData] = useState('Initial Value');
		
		  return (
		    <AppContext.Provider value={{ sharedData, setSharedData }}>
		      <div>
		        <ChildComponentA />
		        <ChildComponentB />
		      </div>
		    </AppContext.Provider>
		  );
		};
		
		export default ParentComponent;

	3.子组件 ChildComponentA
		// ChildComponentA.js
		import React, { useContext } from 'react';
		import AppContext from './AppContext';
		
		const ChildComponentA = () => {
		  const { sharedData, setSharedData } = useContext(AppContext);
		
		  const handleUpdateData = () => {
		    setSharedData('Updated Value');
		  };
		
		  return (
		    <div>
		      <p>Shared Data in Child A: {sharedData}</p>
		      <button onClick={handleUpdateData}>Update Data</button>
		    </div>
		  );
		};
		
		export default ChildComponentA;
	4.子组件 ChildComponentB
		// ChildComponentB.js
		import React, { useContext } from 'react';
		import AppContext from './AppContext';
		
		const ChildComponentB = () => {
		  const { sharedData } = useContext(AppContext);
		
		  return (
		    <div>
		      <p>Shared Data in Child B: {sharedData}</p>
		    </div>
		  );
		};
		
		export default ChildComponentB;
		
创建了一个 AppContext 对象来存储共享的数据。在 ParentComponent 中使用 AppContext.Provider 提供共享数据，并在两个子组件 ChildComponentA 和 ChildComponentB 中分别使用 useContext 钩子来访问共享的数据。

当点击 ChildComponentA 中的按钮时，会更新共享的数据，而 ChildComponentB 中则会展示更新后的数据。这样就实现了函数组件之间的跨组件通信