Question

坚持使用书本学习React的示例代码。下面的代码抛出Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of 'Card'.。检查过SO（有几个类似的问题），但我无法弄清楚这里有什么问题。

import React, {Component} from 'react';
import {render} from 'react-dom';
import CheckList from './CheckList';

class Card extends Component {
    render() {
        return (
            <div className="card">
                <div className="card__title">{this.props.title}</div>
                <div className="card__details">
                    {this.props.description}
                    <CheckList cardId={this.props.id} tasks={this.props.tasks} />
                </div>
            </div>
        );
    }
}

CheckList.js

class CheckList extends Component{
    render(){
          let tasks = this.props.tasks.map((task)=>(
            <li className="checklist__task">
                <input type="checkbox" defaultChecked={task.done} />
                {task.name}

            </li>
        ));
        return (
            <div className="checklist">
                <ul>{tasks}</ul>
            </div>
        );
    }
}

Answer 1

您需要导出CheckList

将班级定义更改为：

export default class CheckList extends Component{

Answer 2

更改代码如下。

这

class CheckList extends Component{
    render(){
          let tasks = this.props.tasks.map((task)=>(
            <li className="checklist__task">
                <input type="checkbox" defaultChecked={task.done} />
                {task.name}

            </li>
        ));
        return (
            <div className="checklist">
                <ul>{tasks}</ul>
            </div>
        );
    }
}

export class CheckList

到

export default class CheckList extends Component{
    render(){
          let tasks = this.props.tasks.map((task)=>(
            <li className="checklist__task">
                <input type="checkbox" defaultChecked={task.done} />
                {task.name}

            </li>
        ));
        return (
            <div className="checklist">
                <ul>{tasks}</ul>
            </div>
        );
    }
}

ReactJS - 警告：React.createElement：type不应为null

2 个答案: