Question

我在父组件中，并且我试图通过单击按钮来动态添加新组件。由于文件很大，因此我将仅粘贴必要的代码。

因此在其下方可以说父组件：

    export default class Parent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            conditions: [{attribute: '', operator: '', value: ''}]
        }
    }

    addCondition = (e) => {
        this.setState((prevState) => ({
            conditions: [...prevState.conditions, { attribute: '', operator: '',value: '' }],
        }));
    }

    render() {
        let {conditions} = this.state
        return(
                <Row>
                    <TextButton label='Add Child' onClick={(e) => {this.addCondition}} flat={true} />
                </Row>
                <Row>
                    <ChildElement conditions={conditions} />
                </Row>
            )
    }

}

这是我要动态渲染的ChildElement：

export class ChildElement extends Component {
    constructor(props) {
        super(props);

        this.state = {
            attribute: '',
            operator: '',
            action: '',
        };
    }

    render() {
        return (
            this.props.conditions.map((val, idx)=> {
                let attributeId = `attributeId-${idx}`,
                    operatorId = `operatorId-${idx}`,
                    valueId = `valueId-${idx}`
                return (
                    <Row>
                        <Col >
                            <Dropdown id={attributeId}  />
                        </Col>
                        <Col >
                            <Dropdown id={operatorId}  />
                        </Col>
                        <Col>
                            <Dropdown id={valueId} />
                        </Col>
                    </Row>
                );
            })
        );
    }
}

加载父组件时出现错误：

Uncaught Error: ConditionElement.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Answer 1

由于我看不到完整的代码，因此我将在这里大加猜测。
您正在导入ChildElement，就好像它是default export一样，但实际上它是命名导出。

此

export class ChildElement

应这样导入：

import {ChildElement} from './path'

不是：

import ChildElement from './path'

Answer 2

您应该将子组件的render方法中的值至少包含在div中。现在，您将返回一个组件数组。

我不知道您使用的是哪个版本的React，但是您可以这样做：

return (
  <>
    { conditions.map( /* ... */ ) }
  </>
);

或

return (
  <div>
    { conditions.map( /* ... */ ) }
  </div>
);

如果您的版本不支持<>和</>。

Answer 3

1-您需要在onClick中实际调用该功能- onClick={(e) => {this.addCondition}}应该是onClick={(e) => {this.addCondition()}}或onClick={this.addCondition}

2-您需要将相邻的React组件包装在一个父对象中（通常是<div>或<React.Fragment>）。

动态添加新组件

3 个答案: