ReactJS switch case 错误 Adjacent JSX elements must be wrapped in an enclosing tag

Question

我是 ReactJS 的新手所以请耐心等待 :)
我有 2 select 字段。每当我 select 来自 Select 1 的选项时，Select 2 将仅显示 selected 选项。这是我的开关代码

var partial;<br>
switch(this.state.pType){<br>
case 1:<br>
  partial = <MenuItem value={1} primaryText="Round Neck"  /> <MenuItem value={2} primaryText="test"  />;<br>
  break;<br>
case 2:<br>
  partial = <MenuItem value={2} primaryText="test"  />;<br>
  break;<br>
case 3:<br>
  partial = "asd";<br>
  break;<br>
}

这是我的 return 代码

return(
  <div>
    <SelectField value={this.state.pType} onChange={this.handleP}>
      <MenuItem value={1} primaryText="Shirt" />
      <MenuItem value={2} primaryText="Jacket" />
      <MenuItem value={3} primaryText="Bag" />
    </SelectField>
    <Row>
      <Col xs={4}>
        Category
        <SelectField value={this.state.catType} onChange={this.handleCat} fullWidth="true">
          {partial}
        </SelectField>

Answer 1

它正在发生，因为在您的代码中的任何地方您都在同时 returning 两个元素。

例如

return(
    <div id="div1"></div>
    <div id="div1"></div>
  )

它应该包裹在父元素中。例如

 return(
      <div id="parent>
        <div id="div1"></div>
        <div id="div1"></div>
      </div>
      )

更详细的解释

您的以下 jsx 代码已转换

class App extends React.Component {
  render(){
    return (
      <div>
        <h1>Welcome to React</h1>
      </div>
    );
  }
}

进入这个

_createClass(App, [{
    key: 'render',
    value: function render() {
      return React.createElement(
        'div',
        null,
        React.createElement(
          'h1',
          null,
          'Welcome to React'
        )
      );
    }
  }]);

但是如果你这样做

class App extends React.Component {
  render(){
    return (
        <h1>Welcome to React</h1>
       </div>Hi</div>
    );
  }
}

this被转换成this（只是为了说明目的，实际上你会得到error : Adjacent JSX elements must be wrapped in an enclosing tag）

_createClass(App, [{
    key: 'render',
    value: function render() {
      return React.createElement(
        'div',
        null,
       'Hi'
      ); 
    return React.createElement(
          'h1',
          null,
          'Welcome to React'
        )
    }
  }]);

在上面的代码中，您可以看到您试图从方法调用中 return 两次，这显然是错误的。

您还需要关闭您的 br 标签。应该是<br/>

ReactJS switch case 错误 Adjacent JSX elements must be wrapped in an enclosing tag

ReactJS switch case error Adjacent JSX elements must be wrapped in an enclosing tag

javascript

switch-statement

reactjs