Question

我有一个恼人的问题。我今天开始使用ReactJS，我正在尝试在实践中学习一些东西。但是，它返回此错误：

Adjacent JSX elements must be wrapped in an enclosing tag (47:14)

这是代码：

var Row = React.createClass({
  displayName: "Row",
  render: function () {
    return <div className="row">{this.props.content}</div>
  }
});

var Title = React.createClass({
  displayName: "Title",
  getDefaultProps: function () {
    return {
      className: ""
    }
  },
  render: function () {
    <h1 className={this.props.className}>{this.state.content}</h1>
  }
});

var Paragraph = React.createClass({
  displayName: "Paragraph",
  getDefaultProps: function () {
    return {
      className: ""
    }
  },
  render: function () {
    <p className={this.props.className}>{this.state.content}</p>
  }
});

var Jumbotron = React.createClass({
  displayName: "Jumbotron",
  render: function () {
    return <div className={this.props.className}>
            {this.props.content}
          </div>
  }
});

var Header = React.createClass({
  displayName: "Header",
  render: function () {
    return <Row content=
            <Jumbotron className="jumbotron col-md-12" content=
              <Title content="Conhecimento Livre" />
              <Paragraph content="Quem busca o conhecimento e o acha, obterá dois prêmios: um por procurá-lo, e outro por achá-lo. Se não o encontrar, ainda restará o primeiro prêmio." />
          />
            />
  }
});

ReactDOM.render(<Header />, document.getElementById('main'));

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Conhecimento Livre</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <script type="text/babel" src="src/app.js"></script>
  </head>
  <body>
    <div id="main">
      <div class="row">
        <div class="jumbotron col-md-12">
          <h1>Conhecimento Livre</h1>
          <p>Quem busca o conhecimento e o acha, obterá dois prêmios: um por procurá-lo, e outro por achá-lo. Se não o encontrar, ainda restará o primeiro prêmio.</p>
        </div>
      </div>
    </div>
  </body>
</html>

利用会问你收到代码的意见。记住我正在开始。

Answer 1

必须在此修改您的代码才能使其正常运行：

    var Row = React.createClass({
  displayName: "Row",
  render: function () {
    return <div className="row"><Jumbotron/></div>
  }
});

var Title = React.createClass({
  displayName: "Title",
  getDefaultProps: function () {
    return {
      className: ""
    }
  },
  render: function () {
    return <h1 className={this.props.className}>{this.props.content}</h1>
  }
});

var Paragraph = React.createClass({
  displayName: "Paragraph",
  getDefaultProps: function () {
    return {
      className: ""
    }
  },
  render: function () {
    return <p className={this.props.className}>{this.props.content}</p>
  }
});

var Jumbotron = React.createClass({
  displayName: "Jumbotron",
  render: function () {
    return <div className={this.props.className}>
            <Title content="Conhecimento Livre" />
            <Paragraph content="Quem busca o conhecimento e o acha, obterá dois prêmios: um por procurá-lo, e outro por achá-lo. Se não o encontrar, ainda restará o primeiro prêmio." />
          />
          </div>
  }
});

var Header = React.createClass({
  displayName: "Header",
  render: function () {
    return <Row/>
  }
});

ReactDOM.render(<Header />, document.getElementById('main'));

Answer 2

你可以试试这个：

var Row = React.createClass({
displayName: "Row",
render: function () {
   return <div className="row">{this.props.children}</div>
   }
});
var Title = React.createClass({
 displayName: "Title",
 getDefaultProps: function () {
 return {
  className: ""
 }
 },
 render: function () {
 <h1 className={this.props.className}>{this.state.content}</h1>
 }
 });

 var Paragraph = React.createClass({
  displayName: "Paragraph",
  getDefaultProps: function () {
  return {
    className: ""
  }
 },
 render: function () {
     <p className={this.props.className}>{this.props.children}</p>
 }
});
var Jumbotron = React.createClass({
    displayName: "Jumbotron",
    render: function () {
    return <div className={this.props.className}>
        {this.props.children}
      </div>
}
});
var Header = React.createClass({
   displayName: "Header",
   render: function () {
   return <Row>
        <Jumbotron className="jumbotron col-md-12">
          <Title content="Conhecimento Livre" />
          <Paragraph>Quem busca o conhecimento e o acha, obterá   dois prêmios: um por procurá-lo, e outro por achá-lo. Se não o encontrar, ainda restará o primeiro prêmio.</Paragraph>
      </Jumbotron>
        </Row>
}
});

附上标签ReactJS

2 个答案: