«reactjs» 태그된 질문

자식 구성 요소의 부모에서 setState를 수행하는 데 권장되는 패턴은 무엇입니까? var Todos = React.createClass({ getInitialState: function() { return { todos: [ "I am done", "I am not done" ] } }, render: function() { var todos = this.state.todos.map(function(todo) { return <div>{todo}</div>; }); return <div> <h3>Todo(s)</h3> {todos} <TodoForm /> </div>; } …

90 reactjs 

모두 동일한 작업을 수행해야하는 여러 구성 요소가 있습니다. (자식 구성 요소를 매핑하고 각각에 대해 작업을 수행하는 간단한 함수). 지금은 각 구성 요소에서이 방법을 정의하고 있습니다. 하지만 한 번만 정의하고 싶습니다. 최상위 구성 요소에서 정의한 다음 소품으로 전달할 수 있습니다. 그러나 그것은 옳지 않다. 소품보다 라이브러리 기능에 가깝습니다. (나에게 보인다). 이를 …

90 reactjs 

나는 이것에 대한 답을 찾기 위해 노력했지만 대부분은 onChange흐림을 유발하는 React의 컨텍스트 외부에 있습니다 . 다양한 테스트를 수행 할 때이 두 이벤트가 어떻게 다른지 (텍스트 영역에 적용했을 때) 말할 수없는 것 같습니다. 누구든지 이것에 대해 밝힐 수 있습니까?

90 javascript  reactjs  dom-events 

후크 기능 (React v16.7.0-alpha)을 사용하기 위해 React with TypeScript 프로젝트를 마이그레이션하고 있지만 구조화 요소의 입력을 설정하는 방법을 알 수 없습니다. 다음은 그 예입니다. interface IUser { name: string; } ... const [user, setUser] = useState({name: 'Jon'}); user변수 유형 을 강제하고 싶습니다 IUser. 내 유일한 성공적인 평가판은 두 단계로 수행하는 것입니다. …

90 reactjs  typescript  react-hooks 

드롭 다운 구성 요소 외부에서 클릭이 발생하면 드롭 다운 메뉴를 닫고 싶습니다. 어떻게하나요?

89 reactjs 

간단한 토글이 있다고 가정 해 보겠습니다. 버튼을 클릭하면 색상 구성 요소가 빨간색과 파란색으로 바뀝니다. 나는 이와 같은 일을함으로써이 결과를 얻을 수있다. index.js Button: onClick={()=>{dispatch(changeColor())}} Color: this.props.color ? blue : red container.js connect(mapStateToProps)(indexPage) action_creator.js function changeColor(){ return {type: 'CHANGE_COLOR'} } reducer.js switch(){ case 'CHANGE_COLOR': return {color: true} 그러나 이것은 jQuery, 일부 …

89 javascript  reactjs  redux 

Flux를 사용하기 위해 앱을 다시 작성하고 있는데 Stores에서 데이터를 검색하는 데 문제가 있습니다. 나는 많은 구성 요소를 가지고 있으며 많이 중첩됩니다. 그들 중 일부는 크고 ( Article), 일부는 작고 단순합니다 ( UserAvatar, UserLink). 구성 요소 계층 구조에서 Stores에서 데이터를 읽어야하는 곳에서 어려움을 겪고 있습니다. 두 가지 극단적 인 접근 방식을 …

89 javascript  reactjs  reactjs-flux 

텍스트 입력이 가운데 정렬되어 있습니다.이 텍스트 입력을 수정하여 왼쪽 상단 모서리에서 입력을 받도록하는 방법 다음은 텍스트 입력 용 CSS입니다. /* The Text input is center aligned, how to fix this text input so that it takes input from top left corner */ input: { flex: 1, padding: 4, marginRight: 1, …

89 javascript  ios  reactjs  react-native 

CSS 파일을 반응 구성 요소로 가져오고 싶습니다. 시도 import disabledLink from "../../../public/styles/disabledLink";했지만 아래 오류가 발생합니다. 모듈을 찾을 수 없음 : 오류 : c : \ Users \ User \ Documents \ pizza-app \ client \ src \ components @에서 'file'또는 'directory'../../../public/styles/disabledLink를 확인할 수 없습니다. /client/src/components/ShoppingCartLink.js 19 : 20-66 Hash : …

89 javascript  reactjs  relative-path 

이 튜토리얼을 사용하여 ReactJS를 레일과 함께 작동 시키려고합니다 . 이 오류가 발생합니다. Uncaught ReferenceError: React is not defined 하지만 난 브라우저 콘솔에서 객체 반응에 액세스 할 수 있습니다 I도 추가 공개 / DIST / 터보 react.min.js 설명 된대로 여기에 또한 추가 설명 application.js 라인을 이 답변에 행운을. 또한 오류를 제공합니다.//= …

89 javascript  ruby-on-rails  reactjs 

다음 구문으로 문제를 파악하는 데 어려움을 겪고 있습니다. export const sendVerificationEmail = async () => (dispatch) => { try { dispatch({ type: EMAIL_FETCHING, payload: true }); await Auth.sendEmailVerification(); dispatch({ type: EMAIL_FETCHING, payload: false })) } catch (error) { dispatch({ type: EMAIL_FETCHING, payload: false }); throw new Error(error); } }; 다음과 …

89 javascript  reactjs  async-await  redux 

https://github.com/moroshko/react-autosuggest 에서 예제를 구현하고 있습니다. 중요한 코드는 다음과 같습니다. import React, { Component } from 'react'; import suburbs from 'json!../suburbs.json'; function getSuggestions(input, callback) { const suggestions = suburbs .filter(suburbObj => suburbMatchRegex.test(suburbObj.suburb)) .sort((suburbObj1, suburbObj2) => suburbObj1.suburb.toLowerCase().indexOf(lowercasedInput) - suburbObj2.suburb.toLowerCase().indexOf(lowercasedInput) ) .slice(0, 7) .map(suburbObj => suburbObj.suburb); // 'suggestions' will be an array of …

89 javascript  json  reactjs  webpack 

숫자는 다음과 같습니다. min + gzip 26k gzip 90k 오리지널 450 + k 그리고 React는 문서에 많은 기능이 없습니다. 왜 그렇게 큽니까? 나는 그것이 경량 DOM의 구현이라고 느낍니다. 하지만 확신하고 싶습니다.

88 reactjs 

ListView와 달리 this.state.datasource를 업데이트 할 수 있습니다. FlatList를 업데이트하거나 다시 렌더링하는 방법이나 예제가 있습니까? 내 목표는 사용자가 버튼을 누를 때 텍스트 값을 업데이트하는 것입니다. renderEntries({ item, index }) { return( <TouchableHighlight onPress={()=> this.setState({value: this.state.data[index].value+1})> <Text>{this.state.data[index].value}</Text> </TouchableHighlight> ) } <FlatList ref={(ref) => { this.list = ref; }} keyExtractor={(item) => item.entry.entryId} data={this.state.data} …

88 reactjs  react-native  react-native-flatlist 

나는 감속기가 있고 새로운 상태를 계산하기 위해서는 액션의 데이터 와이 감속기가 관리하지 않는 상태의 일부의 데이터가 필요합니다. 특히 아래에 표시 할 감속기에서 accountDetails.stateOfResidenceId필드에 대한 액세스 권한이 필요 합니다. initialState.js : export default { accountDetails: { stateOfResidenceId: '', accountType: '', accountNumber: '', product: '' }, forms: { blueprints: [ ] } …

88 javascript  reactjs  redux