«reactjs» 태그된 질문

내가 이해하는대로 및 같은 라우팅 관련 소품을 <Route path="/" component={App} />제공합니다 . 내 구성 요소에 중첩 된 하위 구성 요소가 많이있는 경우 하위 구성 요소가 다음없이 이러한 소품에 액세스하도록하려면 어떻게해야합니까?ApplocationparamsApp 앱에서 소품 전달 창 개체 사용 내포 된 하위 구성 요소에 대한 경로 작성 this.context.router경로와 관련된 정보가있을 거라고 생각했는데 경로 …

85 javascript  reactjs  react-router 

webpack터미널에서 실행할 때마다 다음 을 얻습니다. Hash: efea76b1048c3a97b963 Version: webpack 1.12.13 Time: 33ms + 1 hidden modules ERROR in Cannot find module 'babel-core' 다음은 내 webpack.config.js 파일입니다. module.exports = { entry: './app-client.js', output: { filename: 'public/bundle.js' }, module: { loaders: [ { exclude: /(node_modules|app-server.js)/, loader: 'babel' } ] } } …

84 javascript  express  reactjs  webpack  babeljs 

그래서 일주일 전에 React를 배우기 시작했고 필연적으로 상태 문제와 컴포넌트가 나머지 앱과 통신하는 방식에 대해 알게되었습니다. 나는 주위를 수색했고 Redux는 이달의 풍미 인 것 같다. 나는 모든 문서를 읽었고 실제로 꽤 혁신적인 아이디어라고 생각합니다. 그것에 대한 내 생각은 다음과 같습니다. 상태는 일반적으로 프로그래밍에서 매우 사악하고 버그의 큰 원인으로 동의됩니다. 앱 …

84 javascript  reactjs  state  immutability  redux 

나는 CustomEvent부모 노드와 통신하기 위해 일반 DOM을 만들고 듣고 있습니다 . 어린이 : var moveEvent = new CustomEvent('the-graph-group-move', { detail: { nodes: this.props.nodes, x: deltaX, y: deltaY }, bubbles: true }); this.getDOMNode().dispatchEvent(moveEvent); 부모 : componentDidMount: function () { this.getDOMNode().addEventListener("the-graph-group-move", this.moveGroup); }, 이것은 작동하지만 더 나은 React 전용 방법이 있습니까?

84 reactjs 

React 16이 속성을 DOM으로 전달할 수 있음을 확인했습니다. 따라서 className 대신 'class'를 사용할 수 있습니다. 이전 버전의 React와 역 호환되는 것 외에도 className을 클래스보다 사용하는 것이 장점이 있는지 궁금합니다.

84 reactjs 

함수 구성 요소가 있는데 강제로 다시 렌더링하고 싶습니다. 어떻게 할 수 있습니까? 인스턴스가 없기 때문에 this호출 할 수 없습니다 this.forceUpdate().

84 javascript  reactjs 

이 구성 요소가 있습니다. import React from 'react'; export default class AddItem extends React.Component { add() { this.props.onButtonClick(this.input.value); this.input.value = ''; } render() { return ( <div className="add-item"> <input type="text" className="add-item__input" ref={(input) => this.input = input} placeholder={this.props.placeholder} /> <button disabled={!this.input.value} className="add-item__button" onClick={this.add.bind(this)}>Add</button> </div> ); } } 입력 값이 비어있을 때 …

84 javascript  reactjs 

github에 커밋 할 때 API 키를 숨기려고하는데 포럼에서 지침, 특히 다음 게시물을 살펴 보았습니다. create-react-app에서 API 키를 숨기려면 어떻게하나요? 변경하고 실을 다시 시작했습니다. 내가 뭘 잘못하고 있는지 잘 모르겠습니다. .env프로젝트의 루트 (이름 process.env)와 방금 넣은 파일에 파일을 추가했습니다 REACT_APP_API_KEY = 'my-secret-api-key'. fetchApp.js에서 키를 추가하는 방법이라고 생각 하고 템플릿 리터럴을 사용하지 …

84 reactjs  environment-variables  api-key 

반응으로 링크를 렌더링하고 있습니다. render: -> `<a className="upvotes" onClick={this.upvote}>upvote</a>` 그런 다음 위에 upvote 기능이 있습니다. upvote: -> // do stuff (ajax) 링크 전에 그 위치에 스팬이 있었지만 링크로 전환해야하며 여기에 문제가 있습니다 .upvotes. 페이지를 클릭 할 때마다 새로 고쳐질 때마다 지금까지 시도한 것입니다. event.preventDefault ()-작동하지 않습니다. upvote: (e) -> e.preventDefault() …

84 reactjs  hyperlink  coffeescript  preventdefault 

2 주 동안 만지지 않은 프로젝트가 있습니다. 나는 그것을 되찾고 이제 실행하려고 할 npm start때이 오류가 발생했습니다. > react-scripts start sh: react-scripts: command not found npm ERR! Darwin 16.0.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start" npm ERR! node v6.7.0 npm ERR! npm v3.10.3 npm ERR! file sh npm ERR! code …

84 javascript  reactjs  create-react-app 

나는를 사용 React하고 ESLint있습니다 eslint-plugin-react. 하나의 파일 disable에서 prop-types규칙을 원합니다 . var React = require('react'); var Model = require('./ComponentModel'); var Component = React.createClass({ /* eslint-disable react/prop-types */ propTypes: Model.propTypes, /* eslint-enable react/prop-types */ render: function () { return ( <div className="component"> {this.props.title} </div> ); } });

84 reactjs  eslint 

이전 페이지로 돌아가는 방법을 알아 내려고합니다. 나는 사용하고있다[react-router-v4][1] 다음은 첫 번째 방문 페이지에서 구성한 코드입니다. <Router> <div> <Link to="/"><div className="routerStyle"><Glyphicon glyph="home" /></div></Link> <Route exact path="/" component={Page1}/> <Route path="/Page2" component={Page2}/> <Route path="/Page3" component={Page3}/> </div> </Router> 다음 페이지로 이동하려면 다음을 수행합니다. this.props.history.push('/Page2'); 그러나 이전 페이지로 돌아가려면 어떻게해야합니까? 아래에 언급 된 것과 같은 …

84 javascript  reactjs  react-router-v4 

내 문제를 쉽게 묻기 위해이 코드의 결과를 설명하겠습니다. const ForExample = () => { const [name, setName] = useState(''); const [username, setUsername] = useState(''); useEffect(() => { console.log('effect'); console.log({ name, username }); return () => { console.log('cleaned up'); console.log({ name, username }); }; }, [username]); const handleName = e => …

84 reactjs  react-hooks 

저는 ReactJS를 처음 사용합니다. 이전에는 jQuery를 사용하여 필요한 애니메이션이나 기능을 설정했습니다. 하지만 이제는 ReactJS를 사용하고 jQuery 사용을 최소화하려고합니다. 내 사례는 다음과 같습니다. ReactJS로 아코디언을 만들려고합니다. <div class="accor"> <div class="head">Head 1</div> <div class="body hide">Body 1</div> </div> <div class="accor"> <div class="head">Head 1</div> <div class="body hide">Body 1</div> </div> <div class="accor"> <div class="head">Head 1</div> …

84 javascript  jquery  reactjs 

다음과 같은 라우터가 있습니다. <Router history={hashHistory}> <Route path="/" component={App}> <IndexRoute component={Index}/> <Route path="login" component={Login}/> </Route> </Router> 내가 달성하고 싶은 것은 다음과 같습니다. /login로그인하지 않은 경우 사용자를로 리디렉션 사용자 /login가 이미 로그인 한 상태에서 액세스를 시도한 경우 루트로 리디렉션합니다./ 그래서 지금은에서 사용자의 상태를 확인하기 위해 노력하고있어 AppS ' componentDidMount, 무언가를 좋아한다 …

83 javascript  reactjs  react-router