«reactjs» 태그된 질문

내가 만든 구성 요소가 있습니다. class Create extends Component { constructor(props) { super(props); } render() { var playlistDOM = this.renderPlaylists(this.props.playlists); return ( <div> {playlistDOM} </div> ) } activatePlaylist(playlistId) { debugger; } renderPlaylists(playlists) { return playlists.map(playlist => { return <div key={playlist.playlist_id} onClick={this.activatePlaylist(playlist.playlist_id)}>{playlist.playlist_name}</div> }); } } function mapStateToProps(state) { return { playlists: …

101 javascript  reactjs  redux 

jsx에서 & nbsp 태그를 사용하고 있으며 공간을 렌더링하지 않습니다. 다음은 내 코드의 작은 스 니펫입니다. var Reporting=React.createClass({ render: function(){ return( <div style={divPositionReporting}> <p>Pricing Reports</p> <hr></hr> Select Scenario:   <select> <option></option> </select> <button type="button">Get Pricing Report</button> <br/> Select Takeout Scenario:  <select> <option></option> </select> <button type="button">Get Pricing Report</button> <br/> </div> ); }, });

101 html  reactjs  jsx 

인라인 스타일링을 할 때 ReactJS에서 hover 이벤트 또는 활성 이벤트를 어떻게 얻을 수 있습니까? 나는 onMouseEnter, onMouseLeave 접근 방식이 버그가 있음을 알았으므로 다른 방법이 있기를 바랍니다. 특히 구성 요소 위로 마우스를 빠르게 가져 가면 onMouseEnter 이벤트 만 등록됩니다. onMouseLeave는 실행되지 않으므로 상태를 업데이트 할 수 없습니다. ": active"css 가상 클래스를 …

101 javascript  css  reactjs  mouseevent  dom-events 

한 줄이 잘 작동합니다. render: function () { return ( {[1,2,3].map(function (n) { return <p>{n}</p> }} ); } 여러 줄이 아님 render: function () { return ( {[1,2,3].map(function (n) { return ( <h3>Item {n}</h3> <p>Description {n}</p> ) }} ); } 감사.

100 reactjs 

드래그 가능한 (즉, 마우스로 재배치 할 수있는) React 구성 요소를 만들고 싶습니다. 이는 반드시 전역 상태 및 분산 된 이벤트 핸들러를 포함하는 것으로 보입니다. JS 파일의 전역 변수를 사용하여 더러운 방식으로 할 수 있으며 멋진 클로저 인터페이스로 래핑 할 수도 있지만 React와 더 잘 맞 물리는 방법이 있는지 알고 싶습니다. …

100 javascript  reactjs 

나는 Reactjs로 시작했고 li태그 를 표시하는 간단한 구성 요소를 작성하고 있었고이 오류가 발생했습니다. 예기치 않은 토큰 '<' http://jsbin.com/UWOquRA/1/edit?html,js,console,output 아래 jsbin에 예제를 넣었습니다. 내가 뭘 잘못하고 있는지 알려주세요.

99 reactjs 

React의 Font Awesome 아이콘을 사용하려고 할 때마다 render()일반 HTML에서 작동하지만 결과 웹 페이지에 표시되지 않습니다. render: function() { return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>; } 다음은 실제 예입니다. http://jsfiddle.net/pLWS3/ 결함은 어디입니까?

99 reactjs  font-awesome 

객체를 포함하는 배열 인 스테이션이라는 데이터가 있습니다. stations : [ {call:'station one',frequency:'000'}, {call:'station two',frequency:'001'} ] 각 배열 위치에 대한 UI 구성 요소를 렌더링하고 싶습니다. 지금까지 쓸 수 있습니다 var stationsArr = [] for (var i = 0; i < this.data.stations.length; i++) { stationsArr.push( <div className="station"> {this.data} </div> ) } 그리고 …

99 javascript  reactjs 

두 가지 구성 요소 가 있습니다. 자식 구성 요소의 상태를 변경하려는 부모 구성 요소 : class ParentComponent extends Component { toggleChildMenu() { ????????? } render() { return ( <div> <button onClick={toggleChildMenu.bind(this)}> Toggle Menu from Parent </button> <ChildComponent /> </div> ); } } 및 하위 구성 요소 : class ChildComponent extends …

99 javascript  reactjs 

다음이 있습니다. <Route name="app" path="/" handler={App}> <Route name="dashboards" path="dashboards" handler={Dashboard}> <Route name="exploreDashboard" path="exploreDashboard" handler={ExploreDashboard} /> <Route name="searchDashboard" path="searchDashboard" handler={SearchDashboard} /> <DefaultRoute handler={DashboardExplain} /> </Route> <DefaultRoute handler={SearchDashboard} /> </Route> DefaultRoute를 사용할 때 모든 * Dashboard가 Dashboard 내에서 렌더링되어야하므로 SearchDashboard가 잘못 렌더링됩니다. "app"Route 내의 DefaultRoute가 Route "searchDashboard"를 가리 키도록하고 싶습니다. 이것이 내가 …

98 javascript  routes  reactjs  url-redirection  react-router 

React Native에서 양식을 만들고 TextInput있으며 화면 너비의 80 % 를 만들고 싶습니다 . HTML과 일반 CSS를 사용하면 간단합니다. input { display: block; width: 80%; margin: auto; } React Native는 display속성, 백분율 너비 또는 자동 여백을 지원하지 않습니다 . 그래서 대신 무엇을해야합니까? 거기에 이 문제의 논의 원주민의 이슈 트래커 반응에서,하지만 제안 …

98 javascript  css  reactjs  react-native 

this.state.list자식 목록을 렌더링하는 데 사용할 수 있는 일반 개체 목록이 있다고 가정 해 보겠습니다 . 그렇다면 개체를 삽입하는 올바른 방법은 무엇입니까 this.state.list? 아래는 this.state문서에 언급 된대로 직접 변경할 수 없기 때문에 작동 할 것이라고 생각하는 유일한 방법 입니다. this._list.push(newObject): this.setState({list: this._list}); 이것은 나에게 못생긴 것 같습니다. 더 좋은 방법이 있습니까?

97 javascript  reactjs 

양식을 제출할 doSomething()때 기본 게시 동작 대신 시도하고 있습니다. 분명히 React에서 onSubmit은 양식에 대해 지원되는 이벤트입니다. 그러나 다음 코드를 시도하면 : var OnSubmitTest = React.createClass({ render: function() { doSomething = function(){ alert('it works!'); } return <form onSubmit={doSomething}> <button>Click me</button> </form>; } }); 메서드 doSomething()가 실행되지만 이후에도 기본 게시 동작이 수행됩니다. …

97 javascript  forms  form-submit  reactjs  onsubmit 

나는 단지 텍스트 입력에 쓰고 있고 onChange내가 호출하는 setState경우에 React가 내 UI를 다시 렌더링합니다. 문제는 텍스트 입력이 항상 포커스를 잃기 때문에 각 문자에 대해 다시 포커스가 필요하다는 것입니다. : D. var EditorContainer = React.createClass({ componentDidMount: function () { $(this.getDOMNode()).slimScroll({height: this.props.height, distance: '4px', size: '8px'}); }, componentDidUpdate: function () { console.log("zde"); …

97 javascript  reactjs 

react-router를 사용하여 반응 응용 프로그램을 작업 중입니다. 다음과 같은 URL이있는 프로젝트 페이지가 있습니다. myapplication.com/project/unique-project-id 프로젝트 구성 요소가로드되면 componentDidMount 이벤트에서 해당 프로젝트에 대한 데이터 요청을 트리거합니다. 이제 두 프로젝트간에 직접 전환하면 ID 만 이와 같이 변경되는 문제가 발생합니다. myapplication.com/project/982378632 myapplication.com/project/782387223 myapplication.com/project/198731289 componentDidMount가 다시 트리거되지 않으므로 데이터가 새로 고쳐지지 않습니다. 데이터 요청을 …

97 reactjs  react-router