Javascript 对象作为React子对象无效（找到：[object HtmlDevice]）

我想在我的index.html中将一个值传递给id为

good

的div，但这会导致以下错误，

对象作为React子对象无效（找到：[object htmldevelment]）。如果要呈现子对象集合，请改用数组。在TestComponent中（位于App.js:49）
在div中（在App.js:28中）
在应用程序中（位于index.js:7）

请问我做错了什么

TestComponent.js

import React, { Component } from 'react';

class TestComponent extends Component {
componentDidMount(){
    console.log("Great");
}

render() {
   // var {test} = this.props;
    return (
        <p>
            {this.props.test}
        </p>,
            document.getElementById("good")
    );
}
}

export default TestComponent;

import React，{Component}来自'React'；
类TestComponent扩展组件{
componentDidMount（）{
console.log（“很棒”）；
}
render（）{
//var{test}=this.props；
返回(

{this.props.test}
,，
document.getElementById（“良好”）
);
}
}
导出默认测试组件；

App.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
 import TestComponent from "./components/TestComponent"

class Apps extends Component {
constructor(props){
    super(props);
}
render() {
    return (
        <div>

            <TestComponent test='doyin'/>

        </div>
    );
 }
 }

 export default Apps;

import React，{Component}来自'React'；
从“react dom”导入react dom；
导入“./index.css”；
从“/components/TestComponent”导入TestComponent
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
);
}
}
导出默认应用程序；

Index.html

<div id="good"></div>

---

在

TestComponent.js

中，在

render

函数中，您试图返回两个元素，

和
document.getElementById（“good”）
。可能您只是想返回
：

render() {
  return <p>{this.props.test}</p>;
}

render（）{
返回{this.props.test}
；
}

另外，您似乎将
React.Component.render
与
ReactDOM.render（元素，容器[，回调]）弄错了
，其中函数的第二个参数是容器
 类
组件
呈现函数不应使用
文档.getElementById
，您需要使用
ReactDOM.render
来执行此操作

import React, { Component } from 'react';

class TestComponent extends Component {

    componentDidMount(){
        console.log("Great");
    }

    render() {
       // var {test} = this.props;
        return (
            <p>
                {this.props.test}
            </p>
        );
    }

}


export default TestComponent;

import React，{Component}来自'React'；
类TestComponent扩展组件{
componentDidMount（）{
console.log（“很棒”）；
}
render（）{
//var{test}=this.props；
返回(

{this.props.test}

);
}
}
导出默认测试组件；

应用程序

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
);
}
}
ReactDOM.render（，document.getElementById（“good”））
导出默认应用程序；
类组件是什么意思
TestComponent
是以类模式编写的React组件。无论如何，任何React组件都应该尝试直接在文档中呈现。顶级React组件应该只在DOMReactDOM.render（，document.getElementById（“good”）中呈现，当我把它放在testcomponent.js中时，它不起作用，请说明这可能是因为在这种情况下您没有通过testcomponent的prop测试
class Apps extends Component {

    constructor(props){
        super(props);
    }
    render() {
        return (
            <div>

                <TestComponent test='doyin'/>

            </div>
        );
     }

 }
 ReactDOM.render(<Apps />, document.getElementById("good"))
 export default Apps;