请问为什么react的render方法一直报错,需要闭合标签

ments must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

render() {  
  return (  
      <input type="text" ref="input"/>  
        <button onClick={this.handleClick}>添加</button>  
  <List list={this.state.toDoList}/>  
  )  
}
阅读 563
评论 2月16日提问
    1 个回答

    在 React 项目的 JSX 中,render 返回多个标签/子组件的时候,这些标签/子组件必须包裹在一个标签中,问题代码里的三个东西是并列的,需要包裹起来。
    React 也给了建议 JSX fragment <>...</>……,也就是用 <></> 把 render 返回的东西包裹起来:

    render(){
        <>
            <input type="text" ref="input"/>  
                <button onClick={this.handleClick}>添加</button>  
            <List list={this.state.toDoList}/> 
        </>
    }

    在 React 项目的 JSX 中,<></>React.Fragment 的语法糖,正式的写法是:
    <React.Fragment></React.Fragment>

    评论 赞赏
      撰写回答

      登录后参与交流、获取后续更新提醒