Reactjs 动态添加新组件

我在父组件中，我试图通过单击按钮动态添加一个新组件。我将只粘贴必要的代码，因为我的文件很大

因此，下面让我们说一下父组件：

    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

，就好像它是一个

默认导出

，但实际上它是一个命名导出

这个

应该这样导入：

import {ChildElement} from './path'

而不是：

import ChildElement from './path'

---

因为我看不到完整的代码，所以我将在这里胡乱猜测。
您正在导入

ChildElement

，就好像它是一个

默认导出

，但实际上它是一个命名导出

这个

应该这样导入：

import {ChildElement} from './path'

而不是：

import ChildElement from './path'

---

您应该将子组件的

render

方法中的值至少包含在

div

中。现在返回一个组件数组

我不知道您正在使用哪个版本的React，但您可以：

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

返回(
{conditions.map（/*…*/）}
);

或

返回(
{conditions.map（/*…*/）}
);

---

如果您的版本不支持

和

。

您应该将子组件的

呈现
方法中的值至少包含在
div中。现在返回一个组件数组

我不知道您正在使用哪个版本的React，但您可以：

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

返回(
{conditions.map（/*…*/）}
);

或

返回(
{conditions.map（/*…*/）}
);

如果您的版本不支持
和
。
1-您需要在onClick中实际调用该函数-
onClick={（e）=>{this.addCondition}}
应该是
onClick={（e）=>{this.addCondition（）}
或者
onClick={this.addCondition}

2-您需要将相邻的React组件包装在单个父级中（通常是
或
）。
1-您需要在onClick中实际调用函数-
onClick={（e）=>{this.addCondition}}
应该是
onClick={（e）=>{this.addCondition（）}
或者
onClick={this.addCondition}

2-您需要将相邻的React组件包装在一个父级中（通常是
或
）。
我使用{}导入它，其中哪一个是
条件元素
？我使用{}导入它其中哪一个是
ConditionElement
then？尝试div并获取错误：模块构建失败：SyntaxError:意外标记（40:4）38 | 39 | this.props.conditions.map（（val，idx）=>{>40 | let attributeId=
attributeId-${idx}
，嗯，是的，这确实起到了作用。但是添加新的子元素的确切时间，然后它会重新加载页面hmmm…奇怪。我猜这与您原来的问题无关，但与代码中的其他内容有关。顺便问一下，您是否按照@larz的建议更改了
onClick
属性（即改为
onClick={this.addCondition}
）。至少修复此问题也会有帮助。尝试了div并获得错误：模块构建失败：SyntaxError:意外标记（40:4）38 | 39 | this.props.conditions.map（（val，idx）=>{>40 | let attributeId=
attributeId-${idx}
，嗯，是的，这确实起到了作用。但是添加新的子元素的确切时间，然后它会重新加载页面hmmm…奇怪。我猜这与您原来的问题无关，但与代码中的其他内容有关。顺便问一下，您是否按照@larz的建议更改了
onClick
属性（即改为
onClick={this.addCondition}
）。至少解决这个问题也会有所帮助。
return (
  <div>
    { conditions.map( /* ... */ ) }
  </div>
);