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

Question

我有一个小问题，但我不知道如何执行它以及如何找到其他相关 post。基本上我只想在有 {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>

我该怎么做？

Answer 1

你可以这样做：

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

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

React how to use data.props content to do conditional rendering

reactjs

conditional-rendering