«jsx» 태그된 질문

자식을 렌더링하는 간단한 구성 요소가 있습니다. class ContainerComponent extends Component { static propTypes = { children: PropTypes.object.isRequired, } render() { return ( <div> {this.props.children} </div> ); } } export default ContainerComponent; 질문 : 어린이 소품의 propType은 무엇이어야합니까? 객체로 설정하면 여러 자식과 함께 구성 요소를 사용할 때 실패합니다. <ContainerComponent> <div>1</div> <div>2</div> …

265 reactjs  jsx  react-proptypes 

에서 일할 때 매우 혼란스러워하는 것이 있습니다 React. 인터넷 .js에는 반응이있는 파일 을 사용하는 많은 예제 가 있지만 다른 많은 .jsx파일을 사용 합니다. .jsx파일 에 대해 읽었 으며 내 이해는 파일 안에 html 태그를 작성할 수 있다는 것 javascript입니다. 그러나 .js파일에도 같은 내용을 쓸 수 있습니다 . 그래서이 두 가지 …

211 reactjs  jsx 

React의 공식 문서에서는 다음과 같이 언급합니다. React 클래스 라이프 사이클 메소드에 익숙하다면 useEffect Hook를 componentDidMount, componentDidUpdate 및 componentWillUnmount 결합으로 생각할 수 있습니다. 내 질문은-어떻게 우리는 어떻게 componentWillMount()lifecyle 방법을 후크에서 사용할 수 있습니까?

175 javascript  reactjs  jsx  react-hooks 

React 구성 요소를 작성하려고합니다. html 제목 태그 (h1, h2, h3 등)의 경우, 제목 우선 순위는 소품에서 정의한 우선 순위에 따라 동적으로 변경됩니다. 여기 내가하려는 일. <h{this.props.priority}>Hello</h{this.props.priority}> 예상 출력 : <h1>Hello</h1> 작동하지 않습니다. 가능한 방법이 있습니까?

163 reactjs  jsx 

여기 내가 시도한 것과 그것이 어떻게 잘못되었는지가 있습니다. 이것은 작동합니다 : <div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} /> 이것은하지 않습니다 : <div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /> description 속성은 일반적인 HTML 콘텐츠 문자열입니다. 그러나 어떤 이유로 HTML이 아닌 문자열로 렌더링됩니다. 어떤 제안?

159 javascript  html  reactjs  jsx 

이것에 접근하는 올바른 방법이 무엇인지 궁금합니다. var Hello = React.createClass({ getInitialState: function() { return {total: 0, input1:0, input2:0}; }, render: function() { return ( <div>{this.state.total}<br/> <input type="text" value={this.state.input1} onChange={this.handleChange} /> <input type="text" value={this.state.input2} onChange={this.handleChange} /> </div> ); }, handleChange: function(e){ this.setState({ ??? : e.target.value}); t = this.state.input1 + this.state.input2; this.setState({total: …

142 javascript  reactjs  jsx 

다음과 같이 매우 간단한 기능 구성 요소가 있습니다. import * as React from 'react'; export interface AuxProps { children: React.ReactNode } const aux = (props: AuxProps) => props.children; export default aux; 그리고 또 다른 구성 요소 : import * as React from "react"; export interface LayoutProps { children: React.ReactNode } …

138 reactjs  typescript  jsx  typescript2.0 

React 앱에서 Lint를 실행하고 있는데이 오류가 발생합니다. error JSX props should not use arrow functions react/jsx-no-bind 그리고 이것은 내가 화살표 기능을 실행하는 곳입니다 (내부 onClick). {this.state.photos.map(tile => ( <span key={tile.img}> <Checkbox defaultChecked={tile.checked} onCheck={() => this.selectPicture(tile)} style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}} /> <GridTile title={tile.title} subtitle={<span>by …

103 javascript  reactjs  ecmascript-6  jsx  arrow-functions 

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 

확인란 TSX (JSX) 요소가 있습니다. <input type="checkbox" name={i.toString()} onClick={this.handleCheckboxClick} /> VS 코드의 도움으로의 입력 매개 변수 유형 this.handleCheckboxClick이 MouseEvent<HTMLInputElement>. 그래서 다음과 같이 구현했습니다. private handleCheckboxClick(event: MouseEvent<HTMLInputElement>) { ... } 그런 다음 [ts] Type 'MouseEvent' is not generic.아래 이미지와 같이 오류가 발생 합니다. 내 패키지 버전 : "@types/react": "^15.0.29", "@types/react-dom": "^15.5.0", …

92 reactjs  typescript  events  types  jsx 

저는 Typescript, React 및 Redux (모두 Electron에서 실행 중)로 프로젝트를 진행 중이며 하나의 클래스 기반 구성 요소를 다른 구성 요소에 포함하고 이들 사이에 매개 변수를 전달하려고 할 때 문제가 발생했습니다. 느슨하게 말하면 컨테이너 구성 요소에 대해 다음과 같은 구조가 있습니다. class ContainerComponent extends React.Component<any,any> { .. render() { const { …

91 reactjs  typescript  redux  electron  jsx 

나는 eslint& eslint-plugin-react. ESLint를 실행할 때 linter는 no-unused-vars각 React 구성 요소에 대해 오류를 반환 합니다. JSX 또는 React 구문을 사용하고 있음을 인식하지 못한다고 가정하고 있습니다. 어떤 아이디어? 예: app.js import React, { Component } from 'react'; import Header from './header.js'; export default class App extends Component { render() { return …

91 javascript  reactjs  jsx  eslint 

현재 React Native를 사용하여 테스트 앱을 구축하고 있습니다. 이미지 모듈은 지금까지 잘 작동했습니다. 예를 들어라는 이미지가있는 경우 avatar아래 코드 조각이 제대로 작동합니다. <Image source={require('image!avatar')} /> 하지만 동적 문자열로 변경하면 <Image source={require('image!' + 'avatar')} /> 오류가 발생합니다. 알 수없는 모듈 "image! avatar"가 필요합니다. 모듈이있는 것이 확실하면 패키저를 다시 시작하십시오. 분명히 이것은 …

84 javascript  react-native  jsx 

Webstorm과 달리 .jsVisual Studio Code의 파일에서 JSX 코드를 주석 처리 할 수 ​​없습니다 .

81 reactjs  react-native  visual-studio-code  jsx 

Visual Studio Code에서 구성 요소 또는 HTML 완성을 사용하는 방법이 있습니까? Bootstrap 등의 클래스가있을 때 각 문자를 수동으로 입력하는 것은 좋지 않습니다. 예를 들어 Emmet에서와 같이 완성 :ul>li*2>a var React = require('react'); var Header = React.createClass({ render: function () { return ( <nav className="navbar navbar-defaullt"> <div className="container-fluid"> <a href="/" className="navbar-brand"> …

78 reactjs  autocomplete  visual-studio-code  jsx  emmet