Question

尝试按照本教程进行操作：http://www.mattmorgante.com/technology/dropdown-with-react 我正在尝试不打印行星，而是以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'));

所以我得到Target容器不是React中的DOM元素，而且我不明白问题出在哪里...需要这个才能在一个半星期内到期的项目中工作

Answer 1

真正的问题是您试图将React组件树呈现到React组件本身中：

document.getElementById('react-search')

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

您的HTML需要包含一个非反应性元素，例如：

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

，您必须将React组件呈现到那个 DOM元素中：

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

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

1 个答案: