코딩하다 현타올 때

질문 : React / React Native에서 생성자와 getInitialState를 사용하는 것의 차이점은 무엇입니까? 나는 둘 다 같은 의미로 사용되는 것을 보았다. 둘 다의 주요 사용 사례는 무엇입니까? 장단점이 있습니까? 하나가 더 나은 방법입니까? 답변 두 가지 접근 방식은 서로 바꿔서 사용할 수 없습니다. ES6 클래스 사용시 생성자에서 상태를 초기화하고 React.createClass getInitialState 메서드를 정의해야합니다. ES6 클래스 주제에 대한 공식 React 문서를 참조하십시오 . class MyComponent extends React.Component { constructor(props) { super(props); this.state = { /* initial ..

질문 : 반응 네이티브에서 키보드 숨기기 텍스트 입력을 탭하면 키보드를 다시 닫기 위해 다른 곳을 탭할 수 있기를 원합니다 (하지만 리턴 키는 아님). 내가 읽은 모든 튜토리얼과 블로그 게시물에서 이것에 관한 정보 중 가장 작은 부분을 찾지 못했습니다. 이 기본 예제는 Simulator의 react-native 0.4.2에서 여전히 작동하지 않습니다. 아직 내 iPhone에서 시도 할 수 없습니다. Welcome to React Native! To get started, edit index.ios.js Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu 답변 키보드를 닫을 수있는 방법이 없으므로 keyboardType='numeric' 이 있으면 키보드가..

질문 : React JSX : 선택에서 "선택됨"선택선택권 메뉴의 React 컴포넌트에서 애플리케이션 상태를 반영하는 옵션에 selected 속성을 설정해야합니다. render() 에서 optionState 는 상태 소유자에서 SortMenu 구성 요소로 전달됩니다. 옵션 값은 JSON에서 props render: function() { var options = [], optionState = this.props.optionState; this.props.options.forEach(function(option) { var selected = (optionState === option.value) ? ' selected' : ''; options.push( {option.label} ); }); // p..

질문 : ReactJS- "setState"가 호출 될 때마다 render가 호출됩니까? setState() 가 호출 될 때마다 모든 구성 요소와 하위 구성 요소를 다시 렌더링합니까? 그렇다면 그 이유는 무엇입니까? 저는 React가 상태가 변경 될 때 필요한만큼만 렌더링된다는 생각을했습니다. state 를 동일한 값으로 설정하기 때문에 후속 클릭에서 상태가 변경되지 않더라도 텍스트를 클릭하면 두 클래스가 다시 렌더링됩니다. this.setState({'test':'me'}); state 데이터가 변경된 경우에만 렌더링이 발생할 것으로 예상했습니다. 다음은 JS Fiddle 및 포함 된 스 니펫과 같은 예제 코드입니다. var TimeInChild = React.createClass({ render: f..

질문 : React.js의 배열 자식에 대한 고유 키 이해 JSON 데이터 소스를 받아들이고 정렬 가능한 테이블을 만드는 React 구성 요소를 만들고 있습니다. 각 동적 데이터 행에는 고유 한 키가 할당되어 있지만 여전히 다음과 같은 오류가 발생합니다. 배열의 각 하위에는 고유 한 "키"소품이 있어야합니다. TableComponent의 렌더링 방법을 확인하십시오. 내 TableComponent 렌더링 메서드는 다음을 반환합니다. { rows } TableHeader 구성 요소는 단일 행이며 할당 된 고유 키도 있습니다. 각 row 의 rows 고유 키와 구성 요소에서 내장되어 있습니다 : 그리고 TableRowItem 은 다음과 같습니다. var TableRowItem = React.createClas..

질문 : React js onClick이 메소드에 값을 전달할 수 없습니다. onClick 이벤트 값 속성을 읽고 싶습니다. 하지만 클릭하면 콘솔에 다음과 같은 내용이 표시됩니다. SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: ".1.1.0.2.0.0:1", nativeEvent: MouseEvent, type: "click", target 내 코드가 올바르게 작동합니다. 실행할 때 {column} 볼 수 있지만 onClick 이벤트에서는 가져올 수 없습니다. 내 코드 : var HeaderRows = React.createClass({ handleSort: function(value) { console.log(value); }, render..

질문 : React.js 인라인 스타일 모범 사례 다음과 같이 React 클래스 내에서 스타일을 지정할 수 있다는 것을 알고 있습니다. const MyDiv = React.createClass({ render: function() { const style = { color: 'white', fontSize: 200 }; return Have a good and productive day! ; } }); 이 방식으로 모든 스타일을 지정해야하고 CSS 파일에 스타일이 전혀 지정되어 있지 않아야합니까? 아니면 인라인 스타일을 완전히 피해야합니까? 두 가지를 모두 수행하는 것은 이상하고 지저분 해 보입니다. 스타일을 조정할 때 두 곳을 확인해야합니다. 답변 아직 "모범 사례"가 많지 않습니다. React 컴포넌..

질문 : ReactJS 컴포넌트에 여러 클래스를 추가하는 방법은 무엇입니까? 저는 ReactJS와 JSX를 처음 접했고 아래 코드에 약간의 문제가 있습니다. li className 속성에 여러 클래스를 추가하려고합니다. 내 React 구성 요소는 다음과 같습니다. var AccountMainMenu = React.createClass({ getInitialState: function() { return { focused: 0 }; }, clicked: function(index) { this.setState({ focused: index }); }, render: function() { var self = this; var accountMenuData = [ { name: "My Account", ico..

질문 : React에서이 세 점은 무엇을합니까? ... 이 React (JSX 사용) 코드에서 무엇을하고 무엇이라고 부릅니까? 답변 그것이 재산 확산 표기법 입니다. ES2018에 추가되었지만 (배열 / 이터 러블에 대한 스프레드는 ES2015 이전이었습니다), 트랜스 파일을 통해 오랫동안 React 프로젝트에서 지원되었습니다 ( " JSX 스프레드 속성 "처럼 속성뿐만 아니라 다른 곳에서도 할 수 있음에도 불구하고 ). {...this.props} 에서 "자신의"열거 속성 퍼져 props 상의 개별 속성으로 Modal 요소 당신에게있는 거 만들기. 예를 들어 this.props 에 a: 1 및 b: 2 가 포함 된 경우 다음과 같을 것입니다 props 있는 "자신의"속성이 무엇이든 포함됩니다. chil..

질문 : Facebook Flux보다 Redux를 사용하는 이유는 무엇입니까? 나는 이 답변을 읽고 상용구를 줄이고 GitHub 예제를 몇 개 살펴보고 redux를 조금 시도했습니다 (todo 앱). 내가 이해하는 바와 같이 공식 redux 문서 동기 는 기존 MVC 아키텍처에 비해 전문가를 제공합니다. 그러나 질문에 대한 답을 제공하지 않습니다. Facebook Flux보다 Redux를 사용해야하는 이유는 무엇입니까? 그것은 프로그래밍 스타일의 문제 일뿐입니다 : 기능적 대 비 기능적? 아니면 문제는 redux 접근 방식을 따르는 능력 / 개발 도구에 있습니까? 어쩌면 스케일링? 아니면 테스트? redux가 기능적 언어에서 온 사람들에게 플럭스라고 말하면 맞습니까? 이 질문에 답하기 위해 플럭스와 re..

질문 : 구성 요소가 ReactJS에서 제어 할 텍스트 유형의 제어되지 않은 입력을 변경하고 있습니다. 경고 : 구성 요소가 제어 할 텍스트 유형의 제어되지 않은 입력을 변경하고 있습니다. 입력 요소는 제어되지 않음에서 제어 됨으로 (또는 그 반대로) 전환되지 않아야합니다. 구성 요소의 수명 동안 제어되거나 제어되지 않은 입력 요소를 사용할지 여부를 결정합니다. * 다음은 내 코드입니다. constructor(props) { super(props); this.state = { fields: {}, errors: {} } this.onSubmit = this.onSubmit.bind(this); } .... onChange(field, e){ let fields = this.state.fields; fie..

질문 : React.js의 상태 배열 수정 state 배열의 끝에 요소를 추가하고 싶습니다. 이것이 올바른 방법입니까? this.state.arrayvar.push(newelement); this.setState({ arrayvar:this.state.arrayvar }); push 하여 배열을 제자리에서 수정하면 문제가 발생할 수 있습니다. 안전합니까? 배열의 복사본을 만드는 대안과 낭비적인 setState 답변 React 문서 는 다음과 같이 말합니다. this.state를 변경 불가능한 것처럼 취급하십시오. push 는 상태를 직접 변경하므로 나중에 상태를 다시 "재설정"하는 경우에도 오류가 발생하기 쉬운 코드로 이어질 수 있습니다. componentDidUpdate 와 같은 일부 수명주기 메서드가..

질문 : React.js에서 디 바운스 수행 React.js에서 디 바운스를 어떻게 수행합니까? handleOnChange를 디 바운스하고 싶습니다. debounce(this.handleOnChange, 200) 시도했지만 작동하지 않습니다. function debounce(fn, delay) { var timer = null; return function() { var context = this, args = arguments; clearTimeout(timer); timer = setTimeout(function() { fn.apply(context, args); }, delay); }; } var SearchBox = React.createClass({ render: function() { retu..