«reactjs» 태그된 질문

다음과 같은 React 구성 요소가 있습니다. export default class MyComponent extends React.Component { onSubmit(e) { e.preventDefault(); var title = this.title; console.log(title); } render(){ return ( ... <form className="form-horizontal"> ... <input type="text" className="form-control" ref={(c) => this.title = c} name="title" /> ... </form> ... <button type="button" onClick={this.onSubmit} className="btn">Save</button> ... ); } }; …

188 javascript  reactjs 

많은 템플릿 언어에는 "슬롯"또는 "수율"문이있어 한 템플릿을 다른 템플릿 안에 감쌀 수 있도록 일종의 제어 반전을 수행 할 수 있습니다. Angular에는 "transclude"옵션이 있습니다. Rails는 yield statement를 가지고 있습니다. React.js에 yield 문이 있으면 다음과 같습니다. var Wrapper = React.createClass({ render: function() { return ( <div className="wrapper"> before <yield/> after </div> ); …

187 javascript  template-engine  composition  reactjs  transclusion 

두 개의 자식 클래스 C1과 C2를 렌더링하는 React 클래스 P가 있다고 가정합니다. C1은 입력 필드를 포함합니다. 이 입력 필드를 Foo라고합니다. 저의 목표는 C2가 Foo의 변화에 ​​반응하도록하는 것입니다. 나는 두 가지 해결책을 생각해 냈지만 어느 것도 옳지 않다고 생각합니다. 첫 번째 해결책 : P에게 상태를 할당하십시오 state.input. onChange이벤트를 가져 와서 설정 …

186 reactjs 

폐쇄되었습니다 . 이 질문은 의견 기반 입니다. 현재 답변을받지 않습니다. 이 질문을 개선하고 싶습니까? 이 게시물 을 편집 하여 사실과 인용으로 답변 할 수 있도록 질문을 업데이트하십시오 . 휴일 2 년 전 . 이 질문을 개선하십시오 React 16.3.0이 릴리스 되었으며 Context API는 더 이상 실험 기능이 아닙니다. Dan Abramov (Redux …

186 javascript  reactjs  redux  react-redux  react-context 

React 양식에 문제가 있고 상태를 올바르게 관리하고 있습니다. 양식에 모달로 된 시간 입력 필드가 있습니다. 초기 값은의 상태 변수로 설정되며 getInitialState상위 구성 요소에서 전달됩니다. 이것은 그 자체로 잘 작동합니다. 부모 구성 요소를 통해 기본 start_time 값을 업데이트하려고 할 때 문제가 발생합니다. 업데이트 자체는를 통해 상위 구성 요소에서 발생합니다 setState start_time: …

184 reactjs 

ReactJS의“외부”에서 컴포넌트 메소드에 액세스 할 수없는 이유는 무엇입니까? 왜 불가능하고 해결 방법이 있습니까? 코드를 고려하십시오 : var Parent = React.createClass({ render: function() { var child = <Child />; return ( <div> {child.someMethod()} // expect "bar", got a "not a function" error. </div> ); } }); var Child = React.createClass({ render: …

183 javascript  reactjs  dom 

가져 오기를 사용하여 웹 서비스를 호출하지만 axios의 도움으로 할 수있는 것과 동일합니다. 그래서 지금 혼란스러워합니다. 액시오나 페치 중 하나를 선택해야합니까?

182 ajax  reactjs  xmlhttprequest  es6-promise  es6-modules 

나는 React와 함께 ES6 클래스를 처음 사용하고 있는데, 이전에는 메소드를 현재 객체에 바인딩했지만 (첫 번째 예 참조) ES6을 통해 클래스 함수를 화살표가있는 클래스 인스턴스에 영구적으로 바인딩 할 수 있습니까? (콜백 함수로 전달할 때 유용합니다.) CoffeeScript에서 가능한 한 오류를 사용하려고하면 오류가 발생합니다. class SomeClass extends React.Component { // Instead of this …

181 javascript  reactjs  ecmascript-6  babeljs  ecmascript-next 

스크롤 할 때마다 여러 메시지를 표시하는 채팅 위젯이 있습니다. 내가 지금 직면하고있는 문제는 메시지가로드 될 때 슬라이더가 맨 위에 고정되어 있다는 것입니다. 이전 배열의 마지막 색인 요소에 초점을 맞추고 싶습니다. 인덱스를 전달하여 동적 참조를 만들 수 있다는 것을 알았지 만이를 달성하기 위해 사용할 스크롤 기능의 종류도 알아야합니다. handleScrollToElement(event) { const …

181 javascript  reactjs  ecmascript-6 

나는 전체 nodejs / reactjs 세계에 익숙하지 않으므로 내 질문이 어리석은 경우 사과드립니다. 그래서 reactabular.js 와 함께 놀고 있습니다. 내가 할 때마다 npm start항상 실행됩니다 localhost:8080. 0.0.0.0:8080공개적으로 액세스 할 수 있도록 변경하려면 어떻게합니까 ? 위의 저장소에서 소스 코드를 읽으려고했지만이 설정을 수행하는 파일을 찾지 못했습니다. 또한 그것에 덧붙이려면- 80가능하다면 포트에서 어떻게 …

180 node.js  reactjs  npm  webpack  webpack-dev-server 

나는 표시 할 title에 <AppBar />그 어떻게 든 현재의 경로에서 전달됩니다. React Router v4 <AppBar />에서 현재 경로를 title소품 으로 전달 하는 방법은 무엇입니까? <Router basename='/app'> <main> <Menu active={menu} close={this.closeMenu} /> <Overlay active={menu} onClick={this.closeMenu} /> <AppBar handleMenuIcon={this.handleMenuIcon} title='Test' /> <Route path='/customers' component={Customers} /> </main> </Router> 사용자 정의에서 사용자 정의 제목을 …

180 reactjs  react-router  react-router-v4 

나는 React에서 인라인 CSS 패턴을 좋아하고 그것을 사용하기로 결정했습니다. 그러나 :hover유사한 선택기를 사용할 수 없습니다 . 인라인 CSS 스타일을 사용하는 동안 마우스로 강조 표시를 구현하는 가장 좋은 방법은 무엇입니까? #reactjs의 제안 중 하나는 Clickable구성 요소 를 가지고 다음 과 같이 사용하는 것입니다. <Clickable> <Link /> </Clickable> 는 Clickable이 hovered상태 및 …

178 reactjs 

내가 사용하고 -반응-응용 프로그램을 작성 하고 안함 eject. @ font-face를 통해 가져오고 로컬로로드 한 글꼴이 어디로 가야하는지 명확하지 않습니다. 즉, 나는로드 @font-face { font-family: 'Myriad Pro Regular'; font-style: normal; font-weight: normal; src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff'); } 어떤 제안? -- 편집하다 Dan이 자신의 답변에서 언급 한 요점 포함 ➜ …

177 css  reactjs  fonts  webpack  create-react-app 

ReactJS에서 구성 요소의 상태를 전환하려고하는데 오류 메시지가 나타납니다. 최대 업데이트 깊이를 초과했습니다. 이는 구성 요소가 componentWillUpdate 또는 componentDidUpdate 내에서 setState를 반복적으로 호출 할 때 발생할 수 있습니다. React는 무한 루프를 방지하기 위해 중첩 업데이트 수를 제한합니다. 내 코드에 무한 루프가 보이지 않습니다. 누구든지 도울 수 있습니까? ReactJS 컴포넌트 코드 : …

177 javascript  reactjs  react-native 

나는 React 프로젝트를 사용하여 작업했으며 프로젝트 create-react-app를 시작하는 두 가지 옵션이 있습니다. 첫 번째 방법 : npm run start다음과 같은 정의로 package.json: "start": "react-scripts start", 두 번째 방법 : npm start 이 두 명령의 차이점은 무엇입니까? 그리고의 목적은 무엇 react-scripts start입니까? 정의를 찾으려고했지만이 이름의 패키지를 찾았습니다. 여전히이 명령의 사용법이 무엇인지 …

177 reactjs  npm