附上标签ReactJS

我有一个恼人的问题。我今天开始使用ReactJS，并且正在尝试在实践中学习一些东西。但是，它返回这个错误：附上标签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>

趁着会问你的意见是获得代码。记住我开始了。

来源

2016-03-23 Daniel Bastos

JSX不能片段AFAIR，所以你应该有类似''

component

–

@zb'我把

和错误继续。 –

-1

你可以试试这个：

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> 
} 
});

来源

2016-03-23 03:52:09

必须将相邻的JSX元素封装在封闭标记（44:10）中：/ –

，而不是将整个jsx标记置于content属性中，将其作为内部子元素。在父母它可以访问使用this.props.children。 –

我根据您的代码和答案做了一些更改。谢谢，我会标记一个答案。 –

这里不得不修改代码，使其工作：

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'));

来源

2016-03-23 03:20:19

它的工作原理。但我的想法是重用行，jumb ...等等。这就是阻止它的原因。 –

如果我是你，我会创建一个标题和段落道具，所以我可以重新使用Row元素。 –

但是，该行比这更普遍。他并不总是有头衔。 –

附上标签ReactJS

回答

相关问题