如何在地图功能中添加 React 组件？
泰西格
我有包含带有标题的页面的网络应用程序。标题中有 3 个按钮，我想将确认组件“附加”到其中一个，这意味着当我单击该按钮时，将显示确认组件。代码如下所示：
const renderButtons = (actions: Interfaces.DeclarationAction[]) =>
actions.map((action, i) => {
if (action.name === 4) {
<Confirm
name={modalName()}
content="Are you sure?"
onConfirm={checkingFinish}
/>
}
<ActionButton
key={i}
action={action}
onClickAction={props.onClickAction}
declaration={props.declaration}/>
});
如您所见，renderButtons 渲染了这 3 个按钮，但出现了错误。请看下面的屏幕截图：
如何摆脱错误？
小案
看起来您可能刚刚错过了一个return声明。此外，我认为您不想要第四个Action按钮，但我不确定。你可能想要这样的东西：
const renderButtons = (actions: Interfaces.DeclarationAction[]) =>
actions.map((action, i) => {
return(action.name === 4 ?
<Confirm
name={modalName()}
content="Are you sure?"
onConfirm={checkingFinish}
/> :
<ActionButton
key={i}
action={action}
onClickAction={props.onClickAction}
declaration={props.declaration}/>
)
}
);
或者：
const renderButtons = (actions: Interfaces.DeclarationAction[]) =>
actions.map((action, i) => (action.name === 4 ?
<Confirm
name={modalName()}
content="Are you sure?"
onConfirm={checkingFinish}
/> :
<ActionButton
key={i}
action={action}
onClickAction={props.onClickAction}
declaration={props.declaration}/>
)
);
请注意，在您的代码中，您有一个类似的块
if (condition) {
// do something
}
// do something else
像这样的块总是 do something else，但只有do something在满足条件时才会。因此，如果actions包含三个东西，其中一个包含，action.name === 4那么您将获得四个组件，其中一个将是一个Confirm组件。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何添加在React组件中编辑文本的功能？
- 2
如何在React的子功能组件中触发动作？
- 3
如何在Typescript中编写React无状态功能组件？
- 4
React：如何在功能组件中强制状态更新？
- 5
如何在功能组件的React中获取childNode索引onClick
- 6
如何在此React组件中反跳搜索功能？
- 7
如何在React的子功能组件中触发动作？
- 8
如何在功能组件中访问 react-list getVisibleRange()
- 9
动态添加React组件
- 10
如何在React组件中添加滚动事件
- 11
如何在动态创建的React组件中添加动画
- 12
如何在React材质表中添加/覆盖Footer组件？
- 13
如何在React中的Toggle Switch组件内添加文本？
- 14
如何在React js组件中添加if-else？
- 15
Leaflet React获取功能组件中的地图实例
- 16
如何在React.js中的功能组件中替换类组件的function.bind（this）（分页）
- 17
如何扩展React组件？
- 18
React 组件中的解构
- 19
React 中的组件语法
- 20
React 中的 PrivateRouter 组件
- 21
如何在React中删除包含子组件的功能化组件的渲染器？
- 22
如何在React Native功能组件中从父组件调用子函数？
- 23
React Hooks Const组件vs功能组件
- 24
React Native：功能组件到类组件
- 25
如何在React中从父组件调用子组件的方法
- 26
如何在React Native中让组件控制同级组件？
- 27
React/Javascript：地图功能
- 28
如何在React组件中访问JSON？
- 29
如何在React中测试类组件
我来说两句