Question

我正在使用reactJS开发网站。我想在服务器端使用props渲染我的一个页面。现在我已经在服务器端呈现了页面，并使用用于在服务器端呈现页面的相同道具加载了客户端脚本。在我的浏览器上呈现页面时，check-sum有效。我的问题是事件处理程序不在客户端工作。这是我用来将相同的道具传递给客户端渲染的代码

这是我的组件的渲染方法

render() {
    return (
      <div className="elf-profile-page">
        <EducationLevelProgressBar name={firstName} sponsorAmount={this.props.student.sponserAmount} educateLevel={this.props.student.currentGrade} />
        <hr/>
        <StudentDetails firstName={"Udayanga"} lastName={"Perera"} age={12} currentGrade={this.props.student.currentGrade} district={this.props.student.district}location={this.props.student.district + ', ' + this.props.student.province + ' Province'}
        applicationURL={this.props.student.applicationURL} story={this.props.student.description}
        imageGallery={images} letters={this.props.student.letters}/>
        <div className="container-fluid elf-student-profile-more-student-info">
          <div className="row">
            <div className="col-md-6 col-sm-12 col-xs-12">
              <PersonalProfile
                dateOfBirth={(this.props.student.dateOfBirth.toISOString()).split('T')[0]} joinedDate={(this.props.student.joinedDate.toISOString()).split('T')[0]} gender={this.props.student.gender.charAt(0).toUpperCase() + this.props.student.gender.slice(1)} liaisonOfficer={"Mr.Sasitha Sonnadara"}
                ambition={this.props.student.ambition} fundsReceived={this.props.fundsReceived} hobbies={this.props.student.hobbies} previousSponsors={this.props.previousSponsors}/>
              <HouseholdInfo father={this.props.student.father} mother={this.props.student.mother} householdIncome={this.props.student.householdIncome} siblings={this.props.student.siblings}/>
              <StudentEducation exams={this.props.student.exams} achievements={this.props.student.achievements} currentSchool={this.props.student.currentSchool} currentGrade={this.props.student.currentGrade} previousSchools={this.props.student.previousSchools}/>
            </div>
            <div className="col-md-6 col-sm-12 col-xs-12">
              <NewsFeedTL />
            </div>
          </div>
        </div>
        <div className="container-fluid">
          <div className="row">
            <div className="col-md-4 col-md-offset-4">
              <SocialMediaShare name={firstName} />
            </div>
          </div>
        </div>
        <Credibility />
        <script src="/profile.entry.chunk.js"></script>
      </div>
    );
  }

上面代码末尾的脚本标记是webpack生成的客户端包。我使用以下代码将客户端的道具与服务器端使用的道具同步以呈现我的组件

if ( typeof window !== 'undefined') {
  const stringifiedJSON = '"' + document.getElementById('props').innerHTML + '"';
  const container = document.getElementById('app');
  const props = JSON.parse(stringifiedJSON);
  React.render(ProfilePage(props), container);
}

上面代码的最后一行给出了这个错误

无法将类作为函数调用

我正在使用ES6语法

使用props进行服务器端渲染

0 个答案: