Оказание компонентов условно в Реагировании

Melissa Stewart спросил: 12 мая 2018 в 04:32 в: javascript

Я условно представляю компоненты на домашней странице на основе того, вошел ли пользователь в систему или нет. Это мой код,

class Wrapper extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        const comp = this.state.loggedIn ? (
            <BrowserRouter>
                <div className="wrapper">
                    <Header state={props.state}/>
                    <CoreLogged state={props.state}/>
                </div>
            </BrowserRouter>        ):(
            <BrowserRouter>
                <div className="wrapper">
                    <Header state={props.state}/>
                    <CoreUnlogged state={props.state}/>
                </div>
            </BrowserRouter>
        );
        return (comp);
    }
}
export default Wrapper

Поскольку компонент заголовка визуализируется независимо от того, как я могу реорганизовать этот код только для отображения только секции Core условно? Я новичок в React, вопрос.

javascript reactjs

1 ответ

Есть решение

samanime ответил: 12 мая 2018 в 04:38

Просто возьмите материал, который является общим, и вытащите его, затем используйте {}, чтобы выполнить условие. Вы также можете просто вернуться без переменной:

render() {
  return <BrowserRouter>
    <div className="wrapper">
      <Header state={ props.state } />
      { this.state.loggedIn ? (
          <CoreLogged state={ props.state } />
        ) : (
          <CoreUnlogged state={ props.state } />
        )
      }
    </div>
  </BrowserRouter>;
}

Если компоненты используют одни и те же точные свойства, вы можете просто поместить этот компонент в переменную:

render() {
  const MainComp = this.state.loggedIn ? CoreLogged : CoreUnlogged;  return <BrowserRouter>
    <div className="wrapper">
      <Header state={ props.state } />
      <MainComp state={ props.state } />
    </div>
  </BrowserRouter>;
}

Обратите внимание, что в этом случае переменная должна начинаться с заглавной буквы или React попытается отобразить ее как встроенный компонент HTML.