«react-jsx» 태그된 질문

React는 사용자 인터페이스를 구축하기위한 JavaScript 라이브러리입니다. 선언적 구성 요소 기반 패러다임을 사용하며 효율적이고 유연함을 목표로합니다.

24
소품을 {this.props.children}에 전달하는 방법
일반적인 방법으로 사용할 수있는 일부 구성 요소를 정의하는 올바른 방법을 찾으려고합니다. <Parent> <Child value="1"> <Child value="2"> </Parent> 물론 부모와 자녀 구성 요소 사이의 렌더링에가는 논리가있다, 당신은 상상할 수 <select>와 <option>이 논리의 예로서. 이것은 질문의 목적으로 더미 구현입니다. var Parent = React.createClass({ doSomething: function(value) { }, render: function() { return (<div>{this.props.children}</div>); …
19
setState를 호출하지 않고 React 컴포넌트를 강제로 다시 렌더링 할 수 있습니까?
변경 사항을 듣고 싶은 외부 (구성 요소에 대한) 관찰 가능한 객체가 있습니다. 객체가 업데이트되면 변경 이벤트가 발생하고 변경이 감지되면 구성 요소를 다시 렌더링하려고합니다. 최상위 수준 React.render에서는 가능했지만 구성 요소 내에서는 작동하지 않습니다.render 메소드가 객체를 반환하기 ). 코드 예제는 다음과 같습니다. export default class MyComponent extends React.Component { handleButtonClick() { this.render(); …
690 reactjs  react-jsx 
19
React.js 인라인 스타일 모범 사례
다음과 같이 React 클래스 내에서 스타일을 지정할 수 있습니다. var MyDiv = React.createClass({ render: function() { var style = { color: 'white', fontSize: 200 }; return <div style={style}> Have a good and productive day! </div>; } }); 이 방법으로 모든 스타일을 지정하고 CSS 파일에 스타일을 지정하지 않아야합니까? 아니면 인라인 스타일을 …
6
react setState 메소드를 호출해도 상태가 즉시 변경되지 않는 이유는 무엇입니까?
양식 섹션을 읽고 있습니다.reactjs설명서를 작성 하고이 코드를 onChange사용 하여 사용법 을 보여 줍니다 ( JSBIN ). var React= require('react'); var ControlledForm= React.createClass({ getInitialState: function() { return { value: "initial value" }; }, handleChange: function(event) { console.log(this.state.value); this.setState({value: event.target.value}); console.log(this.state.value); }, render: function() { return ( <input type="text" value={this.state.value} onChange={this.handleChange}/> ); …
16
React / JSX에 스크립트 태그 추가
인라인 스크립팅을 React 구성 요소에 추가하려고하는 비교적 간단한 문제가 있습니다. 내가 지금까지 무엇을 : 'use strict'; import '../../styles/pages/people.scss'; import React, { Component } from 'react'; import DocumentTitle from 'react-document-title'; import { prefix } from '../../core/util'; export default class extends Component { render() { return ( <DocumentTitle title="People"> <article className={[prefix('people'), prefix('people', …
27
Facebook React의 JSX로 조건부 요소를 사용하고 DRY를 유지하는 방법은 무엇입니까?
JSX에 요소를 선택적으로 포함 시키려면 어떻게해야합니까? 다음은 컴포넌트가 전달 된 경우 컴포넌트에 있어야하는 배너를 사용하는 예제입니다. 피하고 ​​싶은 것은 if 문에서 HTML 태그를 복제해야합니다. render: function () { var banner; if (this.state.banner) { banner = <div id="banner">{this.state.banner}</div>; } else { banner = ????? } return ( <div id="page"> {banner} <div …
8
JSX (React Variable Statements)로 HTML 삽입
JSX에서 React Variables가있는 HTML을 삽입 해야하는 React로 무언가를 만들고 있습니다. 다음과 같은 변수를 갖는 방법이 있습니까? var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>'; 이렇게 반응에 삽입하고 작동합니까? render: function() { return ( <div className="content">{thisIsMyCopy}</div> ); } 예상대로 HTML을 삽입 했습니까? 나는이 인라인을 수행 할 수있는 반응 함수 또는 이것이 …
12
반응 / JSX 동적 구성 요소 이름
유형에 따라 구성 요소를 동적으로 렌더링하려고합니다. 예를 들면 다음과 같습니다. var type = "Example"; var ComponentName = type + "Component"; return <ComponentName />; // Returns <examplecomponent /> instead of <ExampleComponent /> 여기에 제안 된 솔루션을 시도했습니다 .React / JSX 동적 구성 요소 이름 컴파일 할 때 오류가 발생했습니다 (gulp에 browserify …
5
매핑 할 객체 배열없이 React.js에서 요소를 반복하고 렌더링하는 방법은 무엇입니까?
jQuery 구성 요소를 React.js로 변환하려고하는데 문제가있는 것 중 하나는 for 루프를 기반으로 n 개의 요소를 렌더링하는 것입니다. 나는 이것이 불가능하거나 권장되며 모델에 배열이 존재하면 사용하는 것이 합리적이라는 것을 이해합니다 map. 괜찮습니다.하지만 배열이 없을 때는 어떻습니까? 대신 렌더링 할 주어진 수의 요소와 같은 숫자 값을 가지면 어떻게해야합니까? 다음은 계층 구조 수준을 …
6
경고 : 알 수없는 DOM 속성 클래스입니다. className을 의미 했습니까?
방금 간단한 렌더링 기능이있는 구성 요소를 추가하여 React를 탐색하기 시작했습니다. render() { return <div class="myApp"></div> } 앱을 실행할 때 다음과 같은 오류가 발생합니다. Warning: Unknown DOM property class. Did you mean className? 나는 변경하여이 문제를 해결 할 수 있습니다 class로 className. 질문은 ~이야; React는이 규칙을 시행합니까? 또한 왜 className기존 대신 …
9
ReactJS :“Uncaught SyntaxError : Unexpected token <”
ReactJS에서 사이트 구축을 시작하려고합니다. 그러나 JS를 별도의 파일에 넣으려고 할 때 "Uncaught SyntaxError : Unexpected token &lt;"오류가 발생하기 시작했습니다. /** @jsx React.DOM */JS 파일 맨 위에 추가하려고했지만 아무것도 고치지 않았습니다. 다음은 HTML 및 JS 파일입니다. 무엇이 잘못되었는지에 대한 아이디어가 있습니까? HTML &lt;html&gt; &lt;head&gt; &lt;title&gt;Page&lt;/title&gt; &lt;script src="http://fb.me/react-0.12.2.js"&gt;&lt;/script&gt; &lt;script src="http://fb.me/JSXTransformer-0.12.2.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/jquery-1.10.0.min.js"&gt; …
7
React JSX 파일에서“Undefined의 'createElement'속성을 읽을 수 없습니다.
실행중인 test_stuff.js 파일이 있습니다. npm test 다음과 같이 보입니다. import { assert } from 'assert'; import { MyProvider } from '../src/index'; import { React } from 'react'; const myProvider = ( &lt;MyProvider&gt; &lt;/MyProvider&gt; ); describe('Array', function() { describe('#indexOf()', function() { it('should return -1 when the value is not present', function() …
9
JSX에 공백을 추가 할 때 모범 사례
JSX에 공백을 추가하는 방법 (및 이유 )을 이해 하지만 모범 사례가 무엇인지 또는 실제 차이가 있는지 궁금합니다. 두 요소를 범위로 래핑 &lt;div className="top-element-formatting"&gt; &lt;span&gt;Hello &lt;/span&gt; &lt;span className="second-word-formatting"&gt;World!&lt;/span&gt; &lt;/div&gt; 한 줄에 추가 &lt;div className="top-element-formatting"&gt; Hello &lt;span className="second-word-formatting"&gt;World!&lt;/span&gt; &lt;/div&gt; JS로 공간 추가 &lt;div className="top-element-formatting"&gt; Hello {" "} &lt;span className="second-word-formatting"&gt;World!&lt;/span&gt; &lt;/div&gt;
6
reactjs에서 문서 키 누르기 듣기
escape눌러서 활성 반응 부트 스트랩 팝 오버를 닫기 위해 바인딩하고 싶습니다 . 여기에 코드가 있습니다. _handleEscKey:function(event){ console.log(event); if(event.keyCode == 27){ this.state.activePopover.hide(); } }, componentWillMount:function(){ BannerDataStore.addChangeListener(this._onchange); document.addEventListener("click", this._handleDocumentClick, false); document.addEventListener("keyPress", this._handleEscKey, false); }, componentWillUnmount: function() { BannerDataStore.removeChangeListener(this._onchange); document.removeEventListener("click", this._handleDocumentClick, false); document.removeEventListener("keyPress", this._handleEscKey, false); }, 하지만 아무 키나 눌러도 콘솔에 아무것도 기록되지 …
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.