Question

我试图在父组件中渲染一些子组件，但没有渲染。我没有收到任何控制台错误，但没有渲染。我无法弄清楚为什么会这样。我正在使用的应用程序是使用React构建的，使用了通量架构。

这是我的代码：

父组件：

import React from 'react';
import TableWithDataHeader from './TableWithDataHeader.jsx';
import TableWithDataBody from './TableWithDataBody.jsx';
import TableWithDataRowForm from './TableWithDataRowForm.jsx';
import AppStore from '../../stores/AppStore';

export default class TableWithData extends React.Component {
    state = {rows: [], isEditing: false};

    componentDidMount() {
        let json = AppStore.getCells();
        let rows = this.state.rows;
        for (let key in json) {
            {rows[key] = json[key]};
        }
        this.setState({rows});
        console.log(rows);
    }

    handleEdit = (row) => {
        this.setState({isEditing: true});
    };

    editStop = (formKey) => {
        this.setState({isEditing: false});
    };

    handleSubmit = () => {
        console.log('hello');
    };

    render() {

        let {rows, isEditing} = this.state;

        console.log(rows);

        return (
            <div>
                <div className="row">
                    <table className="table table-striped">
                        <thead>
                            <TableWithDataHeader />
                        </thead>
                        <tbody>
                            {rows.map(row => this.state.isEditing ? 
                                <TableWithDataRowForm formKey={row.id} key={row.id} editStop={this.editStop(formKey)} handleSubmit={this.handleSubmit} /> : 
                                <TableWithDataBody key={row.id} value={row.historycells.contents} handleEdit={this.handleEdit(row)} />
                            )}
                        </tbody>
                    </table>
                </div>
            </div>
        );
    }
}

RowForm：

import React from 'react';

export default class TableWithDataRowForm extends React.Component {

    editStop = () => {
        this.props.editStop();
    };

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.handleSubmit();
    };

    render() {
        return (
            <tr>
                <td></td>
                <td>
                    <button className=""><i className="btn btn-default" onClick={this.editStop}></i>Cancel</button>
                    <button className="btn btn-success"><i className="fa fa-cloud" onClick={this.handleSubmit}></i>Save</button>
                </td>
            </tr>
        );
    }
}

表头：

import React from 'react';
import AppStore from '../../stores/AppStore';

export default class TableWithDataHeader extends React.Component {

    addHeaders() {
        let headerArray = AppStore.getTable().columns;
        let headerList = headerArray.map((element, index) => {
            return (
                <th key={index} id={element.id} className="text-center">{element.name}</th>
            );
        });
        return headerList;
    }

    render() {
        return (
            <tr>
                {this.addHeaders()}
                <th></th>
            </tr>
        );
    }
}

表体：

import React from 'react';

export default class TableWithDataBody extends React.Component {

    handleEdit() {
        this.props.handleEdit();
    }

    render() {
        return (
            <tr>
                {this.props.histroycells.map(cell => {
                    return <Cell key={cell.id} value={cell.contents} />
                })}
                <td>
                    <button className="btn btn-primary" onClick={this.handleEdit}><i className="fa fa-pencil"></i>Edit</button>
                </td>
            </tr>
        );
    }
}

表格标题呈现正常，但表格主体或编辑表单都没有显示！

非常感谢任何帮助，尤其是示例！

谢谢你的时间！

Answer 1

您的代码中有拼写错误。 histroycells中的TableWithDataBody应为historycells。

Answer 2

也许这会有所帮助：

在<TableWithDataBody>组件中，您尝试访问this.props.historycells，但这不会作为道具传递。

使用以下代码渲染表格行：

<TableWithDataBody 
  key={row.id}
  value={row.historycells.contents} 
  handleEdit={this.handleEdit(row)} />

也许你将渲染更改为：

<TableWithDataBody 
  key={row.id}
  historycells={row.historycells}       // changed this parameter
  handleEdit={this.handleEdit(row)} />

更新：
环绕道具的线仍然应该是：

{this.props.historycells.map(cell => {

PS：还请修复histroycells中的拼写错误。

React - 为什么这个组件没有呈现任何内容？

2 个答案: