«reactjs» 태그된 질문

내 응용 프로그램 (모바일 및 웹 모두)에서 이미 (Babel 덕분에) ECMAScript 6 및 ECMAScript 7 기능을 사용 하고 있습니다. 첫 번째 단계는 분명히 ECMAScript 6 레벨이었습니다. 나는 많은 비동기 패턴, 약속 (정말 유망한), 생성기 (* 기호가 왜 있는지 확실하지 않음) 등을 배웠습니다.이 중에서 약속은 제 목적에 꽤 잘 맞았습니다. 그리고 …

97 javascript  asynchronous  reactjs  async-await  promise 

저는 ReactJs를 처음 사용합니다. 이것은 내 코드입니다. var React = require('react'); var ReactDOM = require('react-dom'); var {Route, Router, IndexRoute, hashHistory} = require('react-router'); var Main = require('Main'); ReactDOM.render( <Router history={hashHistory}> <Route path="/" component={Main}></Route> </Router>, document.getElementById('app')); 웹팩으로 컴파일합니다. 또한 별칭에 Main 구성 요소를 추가했습니다. 콘솔에서 다음 오류가 발생합니다. 다음 링크도 읽었습니다. React …

97 reactjs  react-router 

스타일을 변경하기 위해 반응 구성 요소에 클래스 이름을 전달하려고하는데 작동하지 않는 것 같습니다. class Pill extends React.Component { render() { return ( <button className="pill {this.props.styleName}">{this.props.children}</button> ); } } <Pill styleName="skill">Business</Pill> 나는 각각의 스타일을 가진 클래스의 이름을 전달하여 알약의 스타일을 변경하려고합니다. 저는 React를 처음 사용하므로 올바른 방법으로 수행하지 않을 수 있습니다. …

97 javascript  reactjs 

React.js 와 webpack 으로 웹 사이트를 구축했습니다 . 웹 페이지에서 구글 폰트 를 사용하고 싶어서 링크를 섹션에 넣었습니다. Google 글꼴 <link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"> 그리고 CSS 설정 body{ font-family: 'Bungee Inline', cursive; } 그러나 작동하지 않습니다. 이 문제를 어떻게 해결할 수 있습니까?

96 reactjs  webpack  google-font-api 

저는 React.js 라이브러리를 처음 접했고 튜토리얼 중 일부를 살펴 보았는데 다음과 같이 나타났습니다. this.setState this.replaceState 제공된 설명이 명확하지 않습니다 (IMO). setState is done to 'set' the state of a value, even if its already set in the 'getInitialState' function. 비슷하게, The replaceState() method is for when you want to clear …

96 javascript  frontend  reactjs 

이 React 문서 에서는 다음 과 같이 말합니다. shallowCompare는 현재 상태 및 nextState 객체뿐 아니라 현재 props 및 nextProps 객체에 대해 얕은 동등성 검사를 수행합니다. 내가 이해할 수없는 것은 객체를 얕게 비교하면 shouldComponentUpdate 메서드가 항상 true를 반환합니다. 상태를 변경해서는 안됩니다. 상태를 변경하지 않으면 비교는 항상 거짓을 반환하므로 shouldComponent 업데이트는 항상 …

96 javascript  reactjs 

이 질문을 게시하기 전에 sqa stackexchange에서 검색을 시도했지만 얕은 및 렌더링에 대한 게시물을 찾지 못 했으므로 누군가가 나를 도울 수 있기를 바랍니다. 반응 구성 요소를 테스트 할 때 얕은 및 렌더링을 언제 사용해야합니까? 에어 비앤비 문서를 기반으로 두 가지의 차이점에 대해 몇 가지 의견을 내놓았습니다. shallow는 구성 요소 를 하나의 …

95 testing  meteor  reactjs  chai  enzyme 

저는 webpack을 처음 접했고 프로덕션 빌드에서 전체 코드의 크기를 줄일 수 있다는 것을 알았습니다. 현재 webpack은 약 8MB 파일과 약 5MB의 main.js를 빌드합니다. 프로덕션 빌드에서 코드 크기를 줄이는 방법은 무엇입니까? 인터넷에서 샘플 웹팩 구성 파일을 찾았고 내 응용 프로그램에 대해 구성하고 실행 npm run build하고 빌드를 시작했으며 ./dist/디렉토리에 일부 파일을 …

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

다른 뷰로 리디렉션하기 위해 react-router ( 버전 ^ 1.0.3 )를 사용하여 A SIMPLE을 수행하려고하는데 피곤해집니다. import React from 'react'; import {Router, Route, Link, RouteHandler} from 'react-router'; class HomeSection extends React.Component { static contextTypes = { router: PropTypes.func.isRequired }; constructor(props, context) { super(props, context); } handleClick = () => { console.log('HERE!', …

95 javascript  reactjs 

React Element의 인스턴스에서 React 컴포넌트에 의해 노출 된 메서드를 호출하고 싶습니다. 예를 들어,이 jsfiddle . 참조 에서 alertMessage메서드 를 호출하고 싶습니다 HelloElement. 추가 래퍼를 작성하지 않고도이를 달성 할 수있는 방법이 있습니까? 편집 (JSFiddle에서 복사 한 코드) <div id="container"></div> <button onclick="onButtonClick()">Click me!</button> var onButtonClick = function () { //call alertMessage method …

95 reactjs 

Jest 및 react-testing-library를 사용하기위한 단위 테스트를 작성중인 구성 요소 라이브러리가 있습니다. 특정 소품이나 이벤트를 기반으로 특정 요소가 렌더링되지 않는지 확인하고 싶습니다. getByText, getByTestId등 react-testing-library은 요소가 발견되지 않으면 오류 expect가 발생 하여 함수가 실행 되기 전에 테스트가 실패합니다 . react-testing-library를 사용하여 jest에 존재하지 않는 것을 어떻게 테스트합니까?

95 reactjs  jestjs  react-testing-library 

반응으로 간단한 양식을 만들려고하는데 데이터가 양식의 defaultValue에 제대로 바인딩되는 데 어려움이 있습니다. 내가 찾고있는 동작은 다음과 같습니다. 내 페이지를 열 때 텍스트 입력 필드가 데이터베이스의 AwayMessage 텍스트로 채워 져야합니다. 이것이 "샘플 텍스트"입니다. 데이터베이스의 AwayMessage에 텍스트가없는 경우 이상적으로는 텍스트 입력 필드에 자리 표시자를 갖고 싶습니다. 그러나 지금은 페이지를 새로 고칠 때마다 …

94 javascript  forms  reactjs  coffeescript  2-way-object-databinding 

일부 페이지의 HTML을 살펴 보는 동안 일부 페이지에서 다음과 같은 "data-reactid"속성을 사용하는 것을 발견했습니다. <a data-reactid="......" ></a> 그 속성은 무엇이며 그 기능은 무엇입니까?

94 javascript  html  reactjs 

나는 ReactJS에 새로 왔으며 구성 요소에서 이미지를 가져오고 싶습니다. 이 이미지는 공용 폴더 내에 있으며 반응 구성 요소에서 폴더에 액세스하는 방법을 모릅니다. 어떤 아이디어? 편집하다 Bottom.js 또는 Header.js 내에서 이미지를 가져오고 싶습니다. 구조 폴더는 다음과 같습니다. 웹팩을 사용하지 않습니다. 내가해야합니까 ? 편집 2 이미지와 나머지 자산을로드하는 데 웹팩을 사용하고 싶습니다. …

94 javascript  reactjs 

NavLink에서 "activeClassName"및 "activeStyle"을 설정하는 기능 외에도 사이트에서 탐색하지 않는 요소 (예 : 머리글 또는 바닥 글의 기본 탐색이 아님)의 다른 경로에 대한 링크를 만들 때 NavLink over Link 를 사용하는 이유가 있습니까? 활성 상태 / 클래스가 필요하지 않습니까?

94 reactjs  react-router  react-router-v4