Reactjs 容器不是React中的DOM元素？_Reactjs

Reactjs 容器不是React中的DOM元素？

reactjs

Reactjs 容器不是React中的DOM元素？,reactjs,Reactjs,尝试按照本教程进行操作：我试图不打印行星，而是以html ul li格式打印项目名称。以下是我在每个教程中的2页：用于打印上述项目的项目列表 import React from 'react'; import '../styles/list.css'; import { Component } from 'react'; import ReactDOM from 'react-dom'; import "./ProjectSearch"; class ProjectList extend

尝试按照本教程进行操作：我试图不打印行星，而是以html ul li格式打印项目名称。以下是我在每个教程中的2页：用于打印上述项目的项目列表

import React from 'react';
import '../styles/list.css';
import { Component } from 'react';
import ReactDOM from 'react-dom';
import "./ProjectSearch";

class ProjectList extends Component {
    constructor (props) {
        super (props);
        this.state = {
            projects: [],
        };
    }

    componentDidMount()
    {
        let initialProjects = [];
        fetch('http://192.168.1.33:8080/getprojects/')
        .then(response => {
            return response.json();
        }).then(data => {
            initialProjects = data.results.map((project) => {
                return (project)
            });
            console.log(initialProjects);
            this.setState({
                projects: initialProjects,
            });
        });
    }
   render () {
    let projects = this.props.state.projects;
    let liItems = projects.map((project) =>
            <li key={project.name}>{project.name}</li>
        );
        return (
        <div className="project">
            <div className="validations">
                <div className="validationfilter">
                    <a href="#">Validé </a>
                </div>
                <div className="validationfilter2">
                    <a href="#">En Attente de Validation</a>
                </div>
            </div>
            <div className="create">
            <a href="#">Créer un Projet</a>
            </div>

            <div className="list" id="react-search">
                <ul>
                    {liItems}
                </ul>
            </div>
        </div>

        );
    };
}
export default ProjectList;
ReactDOM.render(<ProjectSearch />, document.getElementById('react-search'));

第二页叫做项目搜索

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Route, withRouter} from 'react-router-dom';

class ProjectSearch extends Component {
    constructor() {
        super();
        this.state = {
            projects: [],
        };
    }

    componentDidMount() {
        let initialProjects = [];
        fetch('http://192.168.1.33:8080/getprojects/')
            .then(response => {
                return response.json();
            }).then(data => {
            initialProjects = data.results.map((projects) => {
                return projects
            });
            console.log(initialProjects);
            this.setState({
                projects: initialProjects,
            });
        });
    }

    render() {
        return (
            <Projects state={this.state}/>
        );
    }

}

export default ProjectSearch;

ReactDOM.render(<ProjectSearch />, document.getElementById('react-search'));

所以我得到的目标容器不是React中的DOM元素，我不明白问题是什么。。。对于一个一周半后到期的项目，需要使用此功能。真正的问题是，您试图将React组件树渲染到React组件本身中：

document.getElementById('react-search')

标识符为react search的元素是react组件。这是行不通的

您的HTML需要包含非react元素，例如：

<html>
  <body>
    <div id="react-root"></div>
  </body>
</html>

您必须将React组件呈现到该DOM元素中：

ReactDOM.render(<ProjectSearch />, document.getElementById('react-root'));

请共享项目组件代码，我没有我有项目列表和项目搜索它按预期打印页面，但我没有我希望的ul li中的任何元素for@FrenchyRomain您的代码中可能还有其他问题，但这正是您所要求的。具体来说，让projects=this.props.state.projects；可能不正确。我删除了该文档。getElementById'react-search'并按原样打印了我的页面，但显然没有进行提取。。。。{this.props.projects&&this.props.projects.mapproject=>{project.name}您可能还应该处理承诺处理程序中的错误。正如我所说，这是另一个问题和另一个问题。