对象作为 React 子对象无效（找到：[object HTMLDivElement]）答案

【问题标题】：Objects are not valid as a React child (found: [object HTMLDivElement])对象作为 React 子对象无效（找到：[object HTMLDivElement]）
【发布时间】：2018-06-21 08:46:31
【问题描述】：

我想在我的 index.html 中将一个值传递给一个 ID 为 good 的 div，但它会带来这个错误，Objects are not valid as a React child (found: [object HTMLDivElement]). If you meant to render a collection of children, use an array instead. in TestComponent (at App.js:49) in div (at App.js:28) in Apps (at 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;

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;

索引.html

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

【问题讨论】：

标签： javascript reactjs ecmascript-6

【解决方案1】：

一个类Component渲染函数不应该使用document.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;

应用程序

class Apps extends Component {

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

                <TestComponent test='doyin'/>

            </div>
        );
     }

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

【讨论】：

类组件是什么意思
TestComponent 是一个以类模式编写的 React 组件。无论如何，任何 React 组件都应该尝试直接在文档中呈现。顶级 React 组件只能在 DOM 中呈现
ReactDOM.render(, document.getElementById("good"))，当我把它放在 testcomponent.js 中时它不起作用，请问为什么
这可能是因为在这种情况下您没有通过道具测试到TestComponent

【解决方案2】：

在TestComponent.js 中，在render 函数中，您试图返回两个元素，<p> 和document.getElementById("good")。可能你只是想返回<p>：

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

此外，您似乎将 React.Component.render 与 ReactDOM.render(element, container[, callback]) 弄错了，其中函数的第二个参数是容器。

【讨论】：