React - 用户定义的 JSX 组件不渲染

IT技术 javascript reactjs jsx
2021-01-16 03:53:08

我一直在尝试进行 AJAX 调用，然后在检索到它后将其添加到我的视图中。

当前代码没有真正发生任何事情。 

const View = () => (
    <div>
     <h1>Reports</h1>
   <statisticsPage />
    </div>
);
export default View;


var statisticsPage = React.createClass({
  getInitialState: function() {
     return {info: "loading ... "};
  },
  componentDidMount: function() {
     this.requestStatistics(1);
  },
  render: function() {
    return (
        <div>info: {this.state.info}</div>
    );
  },
  requestStatistics:function(){
      axios.get('api/2/statistics')
      .then(res => {
        values = res['data']
        this.setState({info:1})
        console.log('works!!')
      });

    }

  })
1个回答

您的组件名称必须以大写字符开头，因为以小写开头的组件将作为默认 DOM 元素进行搜索，例如div, p, span etc. 您的statisticsPage组件不是这种情况。使其大写，它工作正常。

根据文档：

当元素类型以lowercase字母开头时，它指的是内置组件，如 或 并导致'div' 传递给的字符串或“跨度” React.createElement。以大写字母开头的类型，如<Foo />compile toReact.createElement(Foo)并对应于JavaScript文件中定义或导入的组件。

我们建议使用大写字母命名组件。如果您确实有一个以lowercase字母开头的组件，请在将其用于 JSX 之前将其分配给一个大写的变量。

const View = () => (
    <div>
     <h1>Reports</h1>
   <StatisticsPage />
    </div>
);



var StatisticsPage = React.createClass({
  getInitialState: function() {
     return {info: "loading ... "};
  },
  componentDidMount: function() {
     this.requestStatistics();
  },
  render: function() {
    return (
        <div>info: {this.state.info}</div>
    );
  },
  requestStatistics:function(){
        console.log('here');
        this.setState({info:1})
        console.log('works!!')
      

    }

  })

ReactDOM.render(<View/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

其它你可能感兴趣的问题
上一篇如何在不使用具有下载属性或服务器的 <a> 元素的情况下下载文件？ 下一篇Node对象和Element对象的区别？