리액트 사용각도가 있는 JSJS
React를 사용하려고 합니다.각도가 있는 JSJS 근데 잘 안 돼.젤을 어떻게 붙이는지 누가 좀 가르쳐 주시겠어요?아니면 여기에 부족한 점을 지적해 주시겠습니까?
my index.html은 다음과 같습니다.
<!DOCTYPE html>
<html data-ng-app="MyApp">
<head>
<title>My Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body data-ng-controller="Ctrl1">
<div id="myDiv">
<button id="btn1" data-ng-click="clickMe()">Click Me</button>
</div>
<script src="http://fb.me/react-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
<script type="text/jsx" src="reactExample.js"></script>
<script src="angularExample.js"></script>
</body>
</html>
reactExample.js는 다음과 같이 기술되어 있습니다.
/**
* @jsx React.DOM
*/
var testMy = React.createClass({
render: function(){
return ( <p>Hello</p>)
}
});
그리고 angularExample.js는 다음과 같습니다.
var myapp = angular.module('MyApp',[]);
myapp.controller('Ctrl1',['$scope',function($scope){
$scope.clickMe = function(){
alert("Clicked!");
React.renderComponent(testMy, elem[0]);
}
}]);
(경고 이외의) 아무것도 표시되지 않습니다."Hello"가 표시될 것으로 예상되지만 콘솔에 다음 오류가 표시됩니다.
Error: Invariant Violation: prepareEnvironmentForDOM(...): Target container is not a DOM element
어떤 도움이라도 주시면 감사하겠습니다.
이미 @Simon Smith는 에러가 발생하는 이유를 설명했습니다.React.renderComponent두 번째 인수가 필요한데 컨트롤러 내에서 DOM 조작을 실행하는 방법은 적절하지 않습니다.인AngularJsDOM 조작이 필요합니다.directive어떻게 되는지 봅시다.
Facebook의 리액트 vs Angular에서JS: 자세히 보기 블로그
반응 성분은 Angular 템플릿보다 훨씬 강력하므로 대신 Angular의 지시와 비교해야 합니다.
리액트 및 각도 사용 블로그 맨 아래JS를 사용한 섹션은 다음과 같습니다.angular그리고.react같이 놀 수 있어요.
리액트 웹사이트에서
리액트 컴포넌트는 입력 데이터를 받아 표시할 내용을 반환하는 렌더() 메서드를 구현합니다.
인angularjs컴포넌트가 렌더링되다directive
제가 통합한 이 플런커를 보세요.angularjs그리고.react.
인react-example.js내가 만든 것은virtual dom요소
var Hello = React.createClass({
render: function() {
return React.DOM.div({}, 'Hello ' + this.props.name);
}
});
그리고.myMessage지시하다virtual dom
React.renderComponent(Hello({name: scope.myModel.message}), document.getElementById('example'));
어디에virtual dom의name재산은 와 결합할 수 있다scope.myModel.message
컨트롤러에서 React를 사용하려면 다음과 같이 합니다.
myApp.controller(function($scope){
$scope.myComponent = {};
$scope.myComponent.setState({data: "something"});
});
리액트 컴포넌트:
window.myComponent = React.createClass({
getInitialState: function(){
return {
data:''
}
},
componentWillMount: function(){
var scope = this.props.scope;
scope.myComponent = this;
},
render:func .....
});
David Chang의 ngReact 명령을 사용하고 있습니다. 이 명령어는 $scope를 속성으로 컴포넌트에 전달합니다.이제 컨트롤러에서 setState를 호출하여 리액트컴포넌트를 강제로 리렌더 할 수 있게 되었습니다.
리액트 샌드박스에 위의 예가 있습니다.
비각 코드와 각 코드를 통합하기 위해 종종 권장되는 접근 방식이기 때문에 지침을 통해 통합을 수행하는 것을 고려합니다.
다음은 예를 제시하겠습니다.
angular.module('app').directive('greeting',[function(){
return {
restrict:'AE',
scope:{name:'@'},
link: function (scope, elem, attrs){
var GreetingSection = React.createClass({displayName: 'Greeting',
render: function() {
var message = "Good morning " + this.props.data.name + ", how are you?";
return React.createElement('div', {className: "greeting"},message);
}
});
React.renderComponent(GreetingSection({data:scope}), elem[0]);
}
};
}]);
자세한 내용은 이쪽(link disd, archive.org copy 참조):
http://www.syntaxsuccess.com/viewarticle/547bbd04fa0710440b45e41c
대신 ReactJs를 직접 사용하는 대신 ngReact 각도 모듈을 사용해 보십시오.이를 통해 angularJs와도 원활하게 통합됩니다.샘플/메모리를 https://github.com/davidchang/ngReact 에서 확인합니다.
renderComponent는 컴포넌트를 주입하기 위한 두 번째 인수로 DOM 요소를 상정하고 있습니다.그것이 에러가 불평하고 있는 것 같습니다.
언급URL : https://stackoverflow.com/questions/20947191/using-reactjs-with-angularjs
'programing' 카테고리의 다른 글
| WooCommerce:카트 품목에 대한 제품 변형 설명도 표시 (0) | 2023.03.15 |
|---|---|
| React - 하위 DOM 요소에서 React 구성 요소를 가져오시겠습니까? (0) | 2023.03.15 |
| WooCommerce는 속성 쿼리를 통해 제품을 가져옵니다. (0) | 2023.03.15 |
| Wordpress 사용자 또는 데이터베이스로 Firebase/Firechat 인증 (0) | 2023.03.15 |
| C#에서의 json 콜 (0) | 2023.03.15 |