如何在map函数中添加React组件？

Question

我的网页应用包含带标题的页面。标题中有3个按钮，我想将“确认”组件“附加”到其中一个按钮，这意味着当我单击该按钮时将显示确认组件。代码如下所示：

Map

如您所见，renderButtons呈现这3个按钮，但是有一个错误。请看下面的屏幕截图：

如何摆脱错误？

Answer 1

    const myComponent = actions.map((action, i) => {
        return <Component/>
    })

用作{myComponent}

你错过了return

Answer 2

看起来您可能错过了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组件。