React - 用户定义的JSX组件不呈现 [英] React - User-Defined JSX Components Not rendering

问题描述

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

I've been trying to make an AJAX call and then add it to my view after it has been retrieved.

当前代码没有真正发生。

Nothing really happens with the current code.

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!!')
      });

    }

  })

推荐答案

您的组件名称必须以大写字符开头，因为以小写字母开头的那些搜索为默认DOM元素，如 div ，p，span等。对于 statisticsPage 组件，情况并非如此。将它设为大写并且工作正常。

You component name must begin with an Uppercase character since those beginning with lowercase are searched as default DOM elements like div, p, span etc. Which is not the case for your statisticsPage component. Make it uppercase and it works fine.

根据 docs ：

当元素类型以小写字母开头，它指的是一个
内置组件，如或，结果为字符串'div'
或'span'传递给 React.createElement 。以
大写字母开头的类型，如< Foo /> 编译为 React.createElement（Foo）和
对应于 JavaScript 文件中定义或导入的组件。

When an element type starts with a lowercase letter, it refers to a built-in component like or and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like <Foo /> compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

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

We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in 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>

这篇关于React - 用户定义的JSX组件不呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！