Question

我无法渲染名为Butcher Shop的组件。我无法弄清楚我错过了什么，以使它不为null或未定义。谁能发现错误？什么都没有打印到DOM。这是我得到的错误：TypeError：超级表达式必须为null或函数，而不是未定义。

40 |导出类ButcherShop扩展了React.component {

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

const BUTCHER_PRODUCTS = [
  'Tenderloin',
  'Short ribs',
  'Beef shin',
  'Ribeye'
];

export class OlderCoaster extends React.Component {
  render() {
    React.createElement('div', {},
    React.createElement('p', {},"Two grannies having the time of their life!"),
    React.createElement('p', {}, "Passengers:"),
    React.createElement('ul', {},
    [
      React.createElement('li', "Anges"),
      React.createElement('li', {}, "miruel")


    ]));


    return (<div class="oldercoaster"></div>
    );
  };
};
export class InFrontOfYou extends React.Component{
  render() {
    React.createElement('div',{},
  React.createElement('p', {},'You shouldnt look too far'), 
React.createElement('p', {}, 'Sometimes, the soultion is right in from of you'),
);

return (<div></div>);
  };
};

export class ButcherShop extends React.component{
  render() {
    React.createElement('div', {},
  React.createElement('p', {}, 'Hello! We have the following products for sale today'),
React.createElement('ul', {}, 
[
 React.createElement('li', {}, 'Tenderloin'),
 React.createElement('li', {}, 'Short ribs'),
 React.createElement('li', {}, 'Beef shin'),
 React.createElement('li', {}, 'Ribeye') 
]));
return (<div class="butcher-shop"></div>)
  }
}


  ReactDOM.render(
    React.createElement('div', {}, [
      React.createElement(OlderCoaster),
      React.createElement(InFrontOfYou),
      React.createElement(ButcherShop)
    ]),
    document.getElementById('global')
  );

Answer 1

你有一个简单的写错误，它应该是

<button class="text">Button</button> <button class="img">Button</button> <button class="img top-right">Button</button> <button class="img top-right relative">Button</button> <button class="img top-right relative cropper">Button</button>

注意大写C

Answer 2

我看到了几个问题，如果我在InFrontOfYou的class内放了一些文字，你需要将className变成return (<div></div>)。看看你的回归＆＃39;看看它是否正确

Answer 3

主要问题：Component应该大写：另外，请考虑以下语法

    export class ButcherShop extends React.Component{
      render() {
      return 
      <div class="butcher-shop">
       <div>
        <p>'Hello! We have the following products for sale today'</p>
        <ul>
          <li>'Tenderloin'</li>
          <li>'Short ribs'</li>
          <li>'Beef shin'</li>
          <li>'Ribeye'</li>
        </ul>
       </div>
      </div>
      }
    }

Answer 4

这是因为您没有返回在渲染方法中创建的元素。

将所有React.createElement元素保存到变量中并在返回时使用它：

export class ButcherShop extends React.Component{
    render() {
        const content = React.createElement('div', {},
                React.createElement('p', {}, 'Hello! We have the following products for sale today'),
                React.createElement('ul', {},
                [
                    React.createElement('li', {}, 'Tenderloin'),
                    React.createElement('li', {}, 'Short ribs'),
                    React.createElement('li', {}, 'Beef shin'),
                    React.createElement('li', {}, 'Ribeye')
                ]));
        return <div class="butcher-shop">{content}</div>
    }
}

看看你如何渲染你的应用，你将从React.createElement返回对象：

ReactDOM.render(
    React.createElement('div', {}, [
      React.createElement(OlderCoaster),
      React.createElement(InFrontOfYou),
      React.createElement(ButcherShop)
    ]),
    document.getElementById('global')
  );

您的组件渲染方法的工作方式相同。您需要实际返回您创建的元素。

Answer 5

我建议你最好使用JSX。我留下一个链接供您学习使用它： https://reactjs.org/docs/introducing-jsx.html。以下是使用JSX查看代码的示例：

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

const BUTCHER_PRODUCTS = [
'Tenderloin',
'Short ribs',
'Beef shin',
'Ribeye'
];

export class OlderCoaster extends React.Component {
render(){
 return(
    <div className="oldercoaster">
        <p>Two grannies having the time of their life!</p>
        <p>Passengers:</p>
        <ul>
            <li>Anges</li>
            <li>miruel</li>
        </ul>
    </div>
 )}};

 export class InFrontOfYou extends React.Component{
 render() {
  return(
    <div>
        <p>You shouldnt look too far</p>
        <p>Sometimes, the soultion is right in from of you</p>
    </div>
    )
  );
  };

  export class ButcherShop extends React.Component{
   render() {
    return(
      <div className="butcher-shop">
      <p>Hello! We have the following products for sale today</p>
      <ul>
          <li>Tenderloin</li>
          <li>Short ribs</li>
          <li>Beef shin</li>
          <li>Ribeye</li>
      </ul>
     </div>
   )
 }

   ReactDOM.render(
  <div>
      <OlderCoaster/>
      <InFrontOfYou/>
      <ButcherShop/>
  </div>,
document.getElementById('global')
);

在REACT中渲染时遇到问题

5 个答案: