>

다음으로 작업하고, 반응하고, 다시 시작했지만 멈췄습니다.

조건부 구성 요소를 ssr하고 싶습니다. 내 코드에는 위의 조건에 따라 Navbar 구성 요소의 링크를 클릭하면 렌더링되는 3 개의 콘텐츠 구성 요소가 있습니다. 이 코드는 원하는대로 작동하지만 Chrome에서 소스 코드를 볼 때 <Content /> 는 없습니다.  컴포넌트가 렌더링됩니다. 내 코드는 다음과 같습니다.

import React, { Component } from 'react';
import dynamic from 'next/dynamic';
import NProgress from 'nprogress';
import { connect } from 'react-redux';
import Router from 'next/router';
import {
  actionFinansial,
  actionKarierSukses,
  actionGayaHidup
} from '/actions/navbar/navbar';
import SearchBar from '/components/Navbar/SearchBar';
import Nav from '/components/Navbar/Nav';
const Content = dynamic(import('/components/Navbar/Content'));
Router.onRouteChangeStart = url => {
  console.log(`Loading: ${url}`);
  NProgress.start();
};
Router.onRouteChangeComplete = () => NProgress.done();
Router.onRouteChangeError = () => NProgress.done();
class Navbar extends Component {
  state = {
    isClick: false,
    active: ''
  };
  componentDidMount() {
    document.addEventListener('click', this.handleClickOutside);
  }
  componentWillUnmount() {
    document.addEventListener('click', this.handleClickOutside);
  }
  handleClickOutside = e => {
    if (this.nav && !this.nav.contains(e.target)) {
      this.resetNavbar();
    }
  };
  resetNavbar = () => {
    this.setState({
      isClick: false,
      active: ''
    });
  };
  handleClick = (e, data) => {
    e.preventDefault();
    const cond = data === e.target.className || data === e.target.id;
    if (cond) {
      this.setState({
        isClick: true,
        active: data
      });
    }
    if (data === this.state.active) {
      this.setState({
        isClick: false,
        active: ''
      });
    }
  };
  handleContent = id => {
    if (this.state.active === 'Gaya Hidup') {
      this.props.fetchGayaHidup(id);
    } else if (this.state.active === 'Finansial') {
      this.props.fetchFinansial(id);
    } else {
      this.props.fetchKarierSukses(id);
    }
  };
  renderArrow = (type, data) => {
    return <span id={type} className={data} onClick={this.handleClick} />;
  };
  render() {
    const karierSukses = {
      16: 'Karier',
      15: 'Sukses',
      10: 'Edukasi'
    };
    const gayahidup = {
      16: 'Hiburan',
      17: 'Jalan-Jalan',
      18: 'Tekno',
      19: 'Hobi',
      8: 'Hubungan',
      9: 'Pernikahan',
      14: 'Keluarga',
      12: 'Kesehatan',
      15: 'Rumah',
      11: 'Otomotif'
    };
    const finansial = { 16: 'Bisnis', 11: 'Keuangan', 12: 'Investasi' };
    const {
      imgBig,
      contentFinansial,
      contentKarierSukses,
      contentGayaHidup
    } = this.props;
    const { active, isClick } = this.state;
    return (
      <section className="navbar" ref={node => (this.nav = node)}>
        {/* Category Nav */}
        <Nav
          resetNavbar={this.resetNavbar}
          active={active}
          handleClick={this.handleClick}
          arrow={this.renderArrow}
        />
        {/* Category Content */}
        {this.state.active === 'Gaya Hidup' ? (
          <Content
            imgBig={imgBig}
            categoriesIds={gayahidup}
            handleContent={this.handleContent}
            active="8"
            activeName="Hubungan"
            content={contentGayaHidup}
          />
        ) : (
          ''
        )}
        {this.state.active === 'Finansial' ? (
          <Content
            imgBig={imgBig}
            icClick={isClick}
            categoriesIds={finansial}
            handleContent={this.handleContent}
            active="11"
            activeName="Keuangan"
            content={contentFinansial}
          />
        ) : (
          ''
        )}
        {this.state.active === 'Karier & Sukses' ? (
          <Content
            imgBig={imgBig}
            icClick={isClick}
            categoriesIds={karierSukses}
            handleContent={this.handleContent}
            active="10"
            activeName="Edukasi"
            content={contentKarierSukses}
          />
        ) : (
          ''
        )}
        {this.state.active === 'search-bar' ? <SearchBar /> : ''}
        <div className="navbar__search-icon">{/* <img src="" alt="" /> */}</div>
      </section>
    );
  }
}
function mapStateToProps(state) {
  return {
    contentFinansial: state.navbar.category.finansial,
    contentKarierSukses: state.navbar.category.karierSukses,
    contentGayaHidup: state.navbar.category.gayaHidup
  };
}
export default connect(mapStateToProps, {
  fetchGayaHidup: actionGayaHidup,
  fetchFinansial: actionFinansial,
  fetchKarierSukses: actionKarierSukses
})(Navbar);


  • 답변 # 1

    아마도 contentGayaHidup (예를 들어)은 소품으로 전달됩니다. 탐색 표시 줄을 클릭하면 맞습니까? 이 코드 외부에서 발생하는 몇 가지 사항이 있습니다 ...

    문제가 있는지 다음 중 하나를 시도해 볼 수 있습니까? 실제로 문제가있는 경우 (contentXXXXXX 소품이 업데이트되었지만 렌더링으로 전달되지 않은 경우) 전달할 다른 방법을 찾아야 할 수도 있습니다. 국가를 통해 (아마도 광범위 할 수 있음), 아마도 redux를 통해 ...

    Hati2 teman

    1- 소품을 상태로 전달

    constructor(props){
      super(props);
      this.state={contentGayaHidup: this.props.contentGayaHidup}
    }
    // some more code
    render() {
      return(
        {this.state.active === 'Gaya Hidup' ? (
              <Content
                imgBig={imgBig}
                categoriesIds={gayahidup}
                handleContent={this.handleContent}
                active="8"
                activeName="Hubungan"
                content={this.state.contentGayaHidup}
              />
            ) : (
              ''
            )}
      )
    }
    
    

    2-componentdidUpdate 사용

    componentDidUpdate(prevProps, prevState) {
            const {contentGayaHidup} = this.props;
            if(contentGayaHidup !== prevProps.contentGayaHidup){
                this.setState({contentGayaHidup: this.props.contentGayaHidup})
            }
        }
    // some more code
    render() {
      return(
        {this.state.active === 'Gaya Hidup' ? (
              <Content
                imgBig={imgBig}
                categoriesIds={gayahidup}
                handleContent={this.handleContent}
                active="8"
                activeName="Hubungan"
                content={this.state.contentGayaHidup}
              />
            ) : (
              ''
            )}
      )
    }
    
    

  • 이전 php - 중첩 된 키 laravel mongodb jenssegers와 일치하는 레코드를 찾는 방법
  • 다음 c++ - 0 리터럴을 전달할 때 포인터와 참조 사이의 과부하 선택에 대한 이중 인수