基于地图输出的React内容呈现不起作用

Question

我有一个组件，它将依赖于array.map的结果来确定它的输出。在这种情况下，数组包含一个名为“name”的元素，其中一个名称是“Welcome”。需要发生的是组件为“Welcome”实例吐出特定的div，为每个其他实例吐出不同的内容（Accordion组件）。我在渲染中使用了一个三元运算符，然后我在返回中调用它，但是它为组件的每个实例输出相同的文本（仅为'Welcome'实例指定的文本。）我不能为我的生活弄清楚我做错了什么。这是代码：

export default class Back extends React.Component {

constructor(props) {
 super(props)
}

render() {

 const CheckDomains = this.props.totaldomains.map((domain, index) => {    
    <div>
    {
      domain.name === 'Welcome' ?
        <div>This is welcome text.</div>
      :
        <div>This is accordion text.</div>
    }
    </div>
   )
 });


 return(
      <div className='back'>
        {CheckDomains}
      </div>
     );
   }
 }

Answer 1

您需要在地图回调函数中返回一些内容。

像这样：

const CheckDomains = this.props.totaldomains.map((domain, index) => {    
  return  (
      <div>
          {
            domain.name === 'Welcome' ?
              <div>This is welcome text.</div>
            :
              <div>This is accordion text.</div>
          }
        </div>
    )
});