反应不渲染类

Posted 2023-02-23

【中文标题】反应不渲染类

【英文标题】：React not render class

【发布时间】：2018-12-20 15:30:26

【问题描述】：

我使用客户端路由（HashRouter、Link）。在 App 组件中，我有 3 个组件 - Home、Page1、Page2。我想从服务器获取数据并在 Page1 上动态显示这些数据。但是当我转到此页面时，我有错误：

当我不将 Page1 配置为类并将其配置为 const（就像在 app.jsx Home 组件中一样）时，一切正常，但是当我尝试将它配置为类时，我得到了我描述的这个错误下面。

这是我的代码：

app.jsx

import React from 'react'
import 
  HashRouter as Router,
  Route,
  Link
 from 'react-router-dom'
import  
  Container, 
  Row, 
  Col 
 from 'react-grid-system';
import Page1 from "./page1.jsx";

const Home = () => (
  <div class="container-fixed">
    <div class="row">
      <div class="col-l-4">
        <h2 class="underline">Home</h2>
      </div>
    </div>
  </div>
)

const Subpage = ( match ) => (
  <div>
    <h3>match.params.topicId</h3>
  </div>
)

const Page2 = ( match ) => (
  <div class="container-fixed">
    <div class="row">
      <div class="col-l-4">
        <h2 class="underline">Subpages</h2>
        <ul class="content-list">
          <li class="content-list-item">
            <Link to=`$match.url/subpage1`>
              subpage1
            </Link>
          </li>
          <li class="content-list-item">
            <Link to=`$match.url/subpage2`>
            subpage2
            </Link>
          </li>
          <li class="content-list-item">
            <Link to=`$match.url/subpage3`>
            subpage3
            </Link>
          </li>
        </ul>

        <Route path=`$match.path/:topicId` component=Subpage/>
        <Route exact path=match.path render=() => (
          <h3>Please select a subpage.</h3>
        )/>
      </div>
    </div>
  </div>
)

const App = () => (
      <Router>
        <Container>
          <Row>
            <Col md=2>
              <h2 class="underline">Menu</h2>
              <ul class="content-list">
                <li class="content-list-item">
                  <Link to="/">Home</Link>
                </li>
                <li class="content-list-item">
                  <Link to="/page1">Page1</Link>
                </li>
                <li class="content-list-item">
                  <Link to="/page2">Page2</Link>
                </li>
              </ul>
            </Col>
            <Col>
              <Route exact path="/" component=Home/>
              <Route path="/page1" component=Page1/>
              <Route path="/page2" component=Page2/>
            </Col>
          </Row>
        </Container>
      </Router>  
)

export default App

page1.jsx

import React, Component from 'react';
const Row_ = function(props)
    const id, content = props;
    return (
      <div>
        id: id
        content: content
      </div>
    );
  

  class Page1 extends React.Component 
    constructor(props)
      super(props);
      this.state = 
        datas: [
          id: 14, content: "test",
          id: 25, content: "test2",
          id: 75, content: "test3",
        ]
      ;
    

    handleClick() 
      let fetchedData = gerData();
      this.addDataTohtml(fetchedData.id, fetchedData.content);
    

    getData() 
      fetch('/testdata', 
        method: 'GET',
        headers: 
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        
      )
      .then(results => 
        return results.json();
      )
    

    addDataToHTML(id, content)    
      const datas = [...this.state.datas, 
                    value: id, checked: content
                   ];
      this.setState(
          datas,
      );
    

    render()
      <div class="container-fixed">
        <div class="row">
          <div class="col-l-4">
            <h2 class="underline">Page11</h2>
            this.state.datas.map((row, idx) => 
            return(
                <Row_ 
                    id=row.id
                    content=row.content
                    /> 
                )
            )
            
            <button onClick=this.handleClick>
            Get data
            </button>
          </div>
        </div>
      </div>
    
  

  export default Page1

index.jsx

import React, Component from 'react';
import ReactDOM from 'react-dom';

import App from "./app.jsx";
import "../t_styles/css/components.min.css";
import "../t_styles/js/components.min.js";
import $ from "jquery";

ReactDOM.render((
  <App></App>
), document.getElementById('index'))

【问题讨论】：

一个缩小的 React 错误并没有说太多，遗憾的是。您可以在不缩小代码的情况下再试一次，而是在问题中发布该错误吗？你什么时候收到这个错误？

@Tholle 如何关闭最小化 JS 代码？

@SeBr 使用 className 而不是 class。

@javed thnx，我修复了它，但另一个错误：link

@SeBr 在组件返回方法中添加返回语句。检查我给的帖子。

【参考方案1】：

虽然我看不到实际的错误，但我的猜测是您的处理程序未绑定到class 实例，因此您无法通过this 访问它。

所以要么将它们绑定到class（这通常在constructor 内完成）：

this.handleClick = this.handleClick.bind(this);
this.getData= this.getData.bind(this);
this.addDataToHTML= this.addDataToHTML.bind(this);

或者使用将在词法上下文中使用this 的箭头函数语法：

handleClick = () => 
  let fetchedData = gerData();
  this.addDataToHTML(fetchedData.id, fetchedData.content);

【讨论】：

我尝试这样做，但第一种方法不能解决问题，第二种方法有错误 - handleClick = () => 的语法错误第一个 = 是意外令牌

第二种方法需要一个 babel 插件"plugin-transform-class-properties" 但如果第一种方法不能解决问题，那么无论如何它都不是问题。尽管没有我发布的修复程序，我看不到您的代码正常工作的方法。

我删除了所有方法（handleClick、getData、addDataToHTML），到目前为止错误挂起。也许是路线或类的构造函数的问题？因为如果我将 Page1 配置为 const 一切正常

【参考方案2】：

1. use className instead of class.
2. add return statement in your render method of Page1 component

    render()
      return (<div className="container-fixed">
        <div className="row">
          <div className="col-l-4">
            <h2 className="underline">Page11</h2>
            this.state.datas.map((row, idx) => 
            return(
                <Row_ 
                    id=row.id
                    content=row.content
                    /> 
                )
            )
            
            <button onClick=this.handleClick>
            Get data
            </button>
          </div>
        </div>
      </div>)