React 如何使用 data.props 内容做条件渲染

Posted 2023-02-22

【中文标题】React 如何使用 data.props 内容做条件渲染

【英文标题】：React how to use data.props content to do conditional rendering

【发布时间】：2022-01-21 09:46:36

【问题描述】：

我有一个小问题，但我不知道如何执行它以及如何找到其他相关帖子。基本上我只想在有d.socials2时才显示instagram部分，否则我想跳过它：

<div id='row'>
      props.data
        ? props.data.map((d, i) => (
            <div key=`$d.name-$i` className='col-md-3 col-sm-6 team'>
              <div className='thumbnail'>
                ' '
                <img src=d.img alt='...' className='team-img' />
                <div className='caption'>
                  <h4>d.name</h4>
                  <p>d.job</p>
                  <p>Twitter:<a href=`https://twitter.com/$d.socials1`>d.socials1</a></p>
                  d.socials2.length > 0 &&
                    <p>Instagram:<a href=`https://www.instagram.com/$d.socials2`>d.socials2</a></p>
                  
                </div>
              </div>
            </div>
          ))
        : 'loading'
    </div>

我该怎么做？

【参考方案1】：

你可以这样做：

  !!d.socials2 && (
    <p>
      Instagram:
      <a href=`https://www.instagram.com/$d.socials2`>d.socials2</a>
    </p>
  );

【讨论】：

是的，它就像一个魅力！你能告诉我你为什么用!!吗？

！！ => 将数据转换为布尔值

非常感谢！ [我需要等 8 分钟，直到我可以说你的答案就是解决方案]

J.erome 您可以阅读更多关于使用 of !!这里：***.com/questions/784929/…