React之路-条件渲染

条件渲染实例

创建两个独立的组件

// 声明展示home页组件

function Showhome(props){
  return <p>我是home页</p>
}

// 声明展示search页组件
function Showsearch(props){
  return <p>我是search页</p>
}

创建判断当前页面展示哪个组件的组件

function Getcurrentpage(props){
  if(props.ishome){
    return <Showhome />
  }else {
    return <Showsearch />
  }
}
ReactDOM.render(
  <Getcurrentpage ishome={false} />,
  document.getElementById('root')
)
//当传入的ishome为true时,展示Showhome组件
//当传入的ishome为false时,展示Showsearch组件

运算符 &&

与js && 相同,只有两侧都为true的时候才会渲染,如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它

三目运算符

与js三目运算符基本相同

//修改条件渲染组件
function Getcurrentpage(props){
  return (
    <div>
        {
          props.ishome ? <Showhome /> : <Showsearch />
        }
    </div>
  )
}

阻止条件渲染

让 render 方法直接返回 null即可

function WarningBanner(props) {
  if (!props.warn) {
    return null;
    // 直接返回null 就可以阻止条件渲染
    // 并不会影响组件的生命周期
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}