Question

我在React中有以下代码，我不知道为什么它不起作用。基本上我希望它在单击按钮时添加我的组件的实例。

addList = () => {
    return <List />
}

render() {
    return (
        <div>
            <button onClick={ this.addList }>Add new list</button>
        </div>
    );
}

Answer 1

问题是您的addList功能无法呈现任何内容。尝试在函数中设置状态并使用状态来确定渲染函数中要呈现的内容。

请改为尝试：

＆＃13;

addList = () => {
  this.setState({
    showList: true,
  });
}

render() {
  const renderedList = this.state.showList === true ? <List /> : null;
  return (
    <div>
      <button onClick={ this.addList }>Add new list</button>
      {renderedList}
    </div>
  );
}

＆＃13;

onClick不会在反应中呈现新组件

1 个答案: