文章/答案/技术大牛

发布

社区首页 >问答首页 >在React中通过外部函数添加要列出的组件内部的项

问在React中通过外部函数添加要列出的组件内部的项
EN

Stack Overflow用户

提问于 2022-05-24 17:04:31

回答 2查看 75关注 0票数 -1

如何使用外部函数更新组件中的钩式列表？为了清楚起见，假设伪代码：

list.tsx

const lists = () => {

const [list, setlist] = useState([]);

return <>
          The fruits are:
          { list.map( x => <>x.name<br /></> ) }
       </>

}

export { lists }

index.tsx

import { lists } from './list'
...
<Lists /> 
<button onClick={ () => lists.setlist.push({name: 'banana'}) }>Add Banana</button>

欢迎任何研究提示。

我尝试了一些解决方案，比如使用“静态”，并在类中导出函数，但没有成功。

reactjs

react-hooks

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-05-24 17:16:12

list.tsx

const lists = ({ list }) => {

return <>
          The fruits are:
          { list.map( x => <>x.name<br /></> ) }
       </>

}

index.tsx

const [list, setlist] = useState([]);

...
<Lists list={list} /> 
<button onClick={ () => setlist(prev => [..prev, {name: 'banana'}]) }>Add Banana</button>

儿童状态

list.tsx

const lists = ({listsRef}) => {

const [list, setlist] = useState([]);

useEffect(() => {
  listsRef.current = (callback) => setlist(prev => callback(prev))
}, [])

return <>
          The fruits are:
          { list.map( x => <>x.name<br /></> ) }
       </>

}

index.tsx

const listsRef = useRef(null)

...
<Lists listsRef={listsRef} /> 
<button onClick={ () => listsRef.current(prev => [..prev, {name: 'banana'}]) }>Add Banana</button>

票数 1

Stack Overflow用户

发布于 2022-05-24 17:10:06

使用useContext钩子的最简单方法，那么标记的所有子元素都可以访问顶级状态

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72366803

复制

相似问题

问在React中通过外部函数添加要列出的组件内部的项
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在React中通过外部函数添加要列出的组件内部的项EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在React中通过外部函数添加要列出的组件内部的项
EN