林纳德
(@linardsn)
是的,可以通过使用React上下文共享公共值(在本例中名称
属性)。以下是如何实现此功能的示例:
首先,为随机字符串值创建上下文:
从“React”导入React;const RadioGroupNameContext=反应创建上下文(null);导出默认RadioGroupNameContext;
在ContainerBlock组件中,用RadioGroupName上下文。供应商
并为生成随机字符串价值
道具:
从“React”导入React,{useState,useEffect};从“”导入RadioGroupNameContext/RadioGroupNameContext“;函数ContainerBlock({children}){const[randomName,setRandomName]=使用状态('');使用效果(()=>{setRandomName(generateRandomString());}, []);//函数为name属性生成随机字符串函数generateRandomString(){return Math.random().toString(36).subtr(2,8);}返回(<RadioGroupName上下文。提供程序值={randomName}>{childrens}</RRadioGroupName上下文。提供商>);}导出默认ContainerBlock;
在RadioBlock组件中,使用收音机组名称上下文
获取共享名称
最近ContainerBlock的属性值:
从“React”导入React,{useContext};从“”导入RadioGroupNameContext/RadioGroupNameContext';无线电组名称上下文';函数RadioBlock(){const groupName=useContext(RadioGroupNameContext);返回(<div className=“radio-block”><input type=“radio”name={groupName}/>{/*…其他元素*/}</div>);}导出默认RadioBlock;
现在,同一ContainerBlock中的所有RadioBlock将具有相同的随机字符串值名称
属性,该属性通过上下文共享。