我已经开始动手操作 reactjs。我将三个组件放在单独的文件中。mainPage.js list.js并且tableDisplay.js是三个不同的文件。使用 reactjs 后，我几乎没有怀疑。

1. from 的输出mainPage.js作为输入传递给list.js，所以这里 mainPage.js是父组件，list.js是子组件（如果错误请纠正我）。同样，list.js输出作为输入传递给tableDisplay.js，我的疑问是，它list.js仍然作为子组件或充当父组件的组件list.js。

2. 中提取的输出list.js是来自数据库的表。所以我试图在tableDisplay.js页面中显示同一个表，我将获取的数据存储为一个对象。但是我收到一个错误Objects are not valid as a React child (found: object with keys {Name, Emp.no, Designation, WorkOff}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of tableDispay.那么这个错误是什么意思以及如何克服这个错误广告在tableDisplay.js

列表.js：

    class list extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            content: false,
            query : '' ,
        };
        this.clickEvent= this.clickEvent.bind(this);
    }

     onChange(e) {
        this.setState({ query : e.target.value });
    }

    clickEvent(event) {
        event.preventDefault();
        this.setState({
            content: true,
        });

         connectDataBase.query(this.state.query, (err, result) => {
           var dataFetched = result;
            this.setState({
                htmlTable: dataFetched,
            });
        })
    }

    render() {
            return (
                <div>                        
                    <div id="listClass">
                    <label> SQL </label>
                    <br />
                    <textarea rows="4" cols="50" onChange={this.onChange.bind(this)} value={this.state.query}> Query </textarea>
                </div>
                <button onClick={this.clickEvent.bind(this)} > Run </button>
                <div id="third" >
                    {this.state.content && <TableDisplay tableData={this.state.htmlTable}/>} 
                </div>
                </div>
            )
        }
    }

export default list;

tableDisplay.js：

    class tableDisplay extends React.Component{
     constructor(props) {
    super(props);
    this.state = {
    }; 
  }
    render(){

        return(
            <div id="tableClass" >
                <label> Result </label>
                <br/>
                {this.props.tableData.map((x,y)=>
                <table key={y}>
                    {x}
                </table>
                )}
                {this.props.tableData};
            </div>
        )
    }
}

export default tableDisplay;