Question

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

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>
    )
});

基于地图输出无效的内容渲染

1 个答案: