Как отрендерить статический компонент в реагировать - PullRequest
Новая
       8

Как отрендерить статический компонент в реагировать

0 голосов
/ 30 мая 2018

Я разрабатываю веб-приложение для реагирования с использованием typescrpit в visual studio 2017, что для меня является совершенно новой технологией.Я застрял в проблеме, когда я не знаю, как повторно визуализировать компонент из другого компонента.

У меня есть страница входа в систему.То, что я хочу сделать, это отображать имя пользователя в моем компоненте заголовка, когда пользователь входит в систему. Единственная проблема в том, что компонент заголовка является общим для всех моих веб-страниц.Ниже приведен мой файл layout.tsx: - 

export interface LayoutProps {
children?: React.ReactNode;
}

export class Layout extends React.Component<LayoutProps, {}> {
public render() {
    return <div>
        <Header />
        <div className='layout_wrapper'>
            {this.props.children}
        </div>
        <Footer />
    </div>;
}
}

Это единственный файл, в котором я использовал свой компонент заголовка, так что мне не придется использовать его в каждом создаваемом компоненте.componentDidMount () компонента заголовка проверит токен доступа и выполнит вызов API для получения сведений о пользователе.Теперь мой вопрос: как я могу перерисовать этот компонент из другого компонента, чтобы, когда пользователь входит в систему, он мог видеть свое имя в этом компоненте заголовка?Пожалуйста, скажите мне, если мне нужно предоставить больше кода, если мой вопрос не ясен.Спасибо

Ответы [ 2 ]

0 голосов
/ 30 мая 2018

Учитывая, что это небольшое приложение, это решение будет работать.Но его не следует использовать, когда приложение не маленькое, потому что оно сделает код сложным.

Итак, согласно информации, предоставленной вами, иерархия выглядит следующим образом: 

<Header>
    <SignIn>
        <SignInContent/>
    </SignIn>
</Header>

, где компонент SignInContent вызывает API.Мы определим функцию в заголовке и передадим ее как реквизиты компоненту SignIn 

export class Header extends React.Component<HeaderProps, HeaderState> { 
    constructor(){
       this.state = { isLoggedIn: false }; //Add this to existing state variables
    }
    render() {
        return {
            <SignIn setIsLoggedInTrue={this.setIsLoggedInTrue.bind(this)} />
        }
    }
    componentDidUpdate(prevProps, prevState) {
        if(this.state.isLoggedIn && !prevState.isLoggedIn) {
            // Make the api call for fetching user details
        }
    }
    setIsLoggedInTrue() {
       this.setState({isLoggedIn: true});
    }
}

А в компоненте SignIn снова в методе рендеринга передайте реквизиты SignInContent следующим образом: <SignInContent setIsLoggedInTrue={this.props.setIsLoggedInTrue} /> развошел в систему, вы можете вызвать функцию this.props.setIsLoggedInTrue из компонента SignInContent.Это должно решить вашу цель

0 голосов
/ 30 мая 2018

Ваш компонент будет перерисован, если поставленные реквизиты были изменены.

При просмотре вашего кода значение this.props.children должно измениться, что в конечном итоге приведет к повторной визуализации вашего компонента

Также, если вы хотите знать, как вызвать его при входе в систему,Должен существовать метод componentWillReceiveProps, который проверяет состояние входа пользователя в систему и, если он найден вошедшим в систему, обновит значения, передаваемые компоненту:)

EDIT

Вот пример кода вашей проблемы.Так как this.props.children используется.Вам нужно будет использовать его следующим образом. 

    render() { return (
       <Layout>
         {this.state.userName}
       </Layout>
       );}

Теперь вызовите API и установите userName

...