Phản hồi bên máy chủ ReactJS và phương thức componentDidMount

Question

Tôi mới sử dụng React, vì vậy xin đừng đánh giá nghiêm túc. Tôi đang hiển thị ứng dụng React trên máy chủ và muốn thực thi mã trên giao diện người dùng. Ứng dụng hiển thị đúng với kiểu và không có cảnh báo hoặc lỗi, mặc dù có trạng thái trống vì tôi đang sử dụng API nên thực thi ở mặt trước và hiện tại là OK.

như tôi hiểu máy chủ làm cho thành phần và từ máy chủ trả lại và gắn kết thành phần trên máy chủ và nó không được gọi componentDidMount() phương pháp mà nên làm cuộc gọi API của tôi và nhân viên khác

này là thành phần của tôi

import React from 'react'; 
import {render} from 'react-dom'; 
import SpComparison from './spComparison.jsx'; 
import Comparison from './comparison.jsx'; 
import AnalystRatings from './analystRatings.jsx'; 


export default class Insights extends React.Component { 
constructor(props){ 
    super(props); 
    this.state = { 
     charts: [] 
    } 

    let _this = this; 
} 

componentDidMount() { 
    console.log("I want to do log on front end side, but can't") 
} 

render() { 
    let charts = this.state.charts.map(function(i){ 
     if (i.type == 'comparison'){ 
      return <Comparison key={ i.id } config={ i.config } /> 
     } 
     else if (i.type == 'sp-comparison'){ 
      return <SpComparison key={ i.id } config={ i.config } /> 
     } 
     if (i.type == 'analyst-ratings'){ 
      return <AnalystRatings key={ i.id } config={ i.config } /> 
     } 
    }); 

    return (
     <div id="insights" className="container"> 
      <div className="row"> 
       <div className="col-md-3 hidden-md-down" style={{ 
        marginTop: 10 
       }}> 
        <ul className='finstead-tabs'> 
         <li className="finstead-tabs-header"> 
          Categories 
         </li> 
         <li> 
          <a href='' className="finstead-active-tab">Performance</a> 
         </li> 
         <li> 
          <a href=''>Financial</a> 
         </li> 
         <li> 
          <a href=''>Valuation</a> 
         </li> 
         <li> 
          <a href=''>Shares</a> 
         </li> 
         <li> 
          <a href=''>Outlook</a> 
         </li> 
        </ul> 
       </div> 
       <div className="col-xs-12 col-md-9"> 
        { charts } 
       </div> 
      </div> 
     </div> 
    ) 
} 
} 

Tôi đoán tôi đang làm nó không đúng cách, vì vậy hãy giúp tôi.

LƯU Ý

Trong thành phần mức cao nhất tôi đã không gọi ReactDOM.render nó có thể gây ra hành vi này?

tutorial mà tôi sử dụng ví dụ

Answer 1

Tôi đã tìm thấy giải pháp sau khi đọc tutorial kỹ lưỡng hơn.

Vấn đề là sự thiếu chú ý của tôi và mọi thứ được mô tả trong hướng dẫn ở trên.

về cơ bản trong tệp được nhóm, bạn nên gọi ReactDOM.render để thực thi lại ứng dụng, nhưng nó sẽ không ảnh hưởng đến hiệu suất vì React sử dụng VirtualDOM và khác với DOM hiện có.

vì vậy mà không cần ReactDOM.render js sẽ không được thực thi.

vì vậy tôi đã tạo tệp riêng biệt app-script.js là điểm nhập cảnh của tôi cho gói và nó gọi thành phần cao nhất của tôi với ReactDOM.render.