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

问题描述

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

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

const View = () =>(<div><h1>报告</h1><统计页面/>

);导出默认视图；var statisticsPage = React.createClass({getInitialState:函数(){返回{信息:加载..."}；},componentDidMount:函数(){this.requestStatistics(1);},渲染:函数(){返回 (<div>信息:{this.state.info}</div>);},请求统计:功能(){axios.get('api/2/statistics').then(res => {值 = res['数据']this.setState({信息:1})console.log('有效！！')});}})

解决方案

你的组件名称必须以大写字符开头，因为那些以小写开头的会被搜索为默认的 DOM 元素，例如 div、p、span 等.您的 statisticsPage 组件不是这种情况.将其设为大写，它就可以正常工作.

根据 文档:

<块引用>

当元素类型以小写字母开头时，它指的是一个像 or 一样的内置组件并产生一个字符串 'div'或 'span' 传递给 React.createElement.以 a 开头的类型像 <Foo/> 这样的大写字母编译为 React.createElement(Foo) 和对应于 JavaScript 文件中定义或导入的组件.

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

const View = () =>(<div><h1>报告</h1><统计页面/>

);var StatisticsPage = React.createClass({getInitialState:函数(){返回{信息:加载..."}；},componentDidMount:函数(){this.requestStatistics();},渲染:函数(){返回 (<div>信息:{this.state.info}</div>);},请求统计:功能(){console.log('这里');this.setState({信息:1})console.log('有效！！')}})ReactDOM.render(, 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>

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

    }

  })

解决方案

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.

According to the docs:

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.

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屋！