반응형

reactjs 22

React.js 노드 마운트 해제 중

React.js 노드 마운트 해제 중 React.js 노드를 마운트 해제하려고 합니다.this._rootNodeID handleClick: function() { React.unmountComponentAtNode(this._rootNodeID) } 하지만 다시 돌아온다false. 그handleClick요소를 클릭하면 부팅되며 루트 노드를 마운트 해제해야 합니다.에 관한 문서unmountComponentAtNode 여기서 이것도 해봤어요. React.unmount ComponentAtNode($('*[data-reactid=')+this)._rootNode(루트 노드)ID+'''''[0]) 그 셀렉터는,jQuery.hide()단, 언마운트에서는 사용할 수 없습니다.다만, 메뉴얼마운트할 필요가 있습니다.D..

programing 2023.04.06

형제 요소를 부모 태그로 묶지 않고 렌더링하려면 어떻게 해야 합니까?

형제 요소를 부모 태그로 묶지 않고 렌더링하려면 어떻게 해야 합니까? 대부분의 경우 부모 태그는 문제가 되지 않습니다. React.createClass({ render: function() { return ( Item 1 Item 2 ); } }); 그러나 상위 렌더링 기능 없이 하나의 렌더 함수에 형제 요소를 포함하는 것이 타당할 수 있습니다. 특히 테이블의 경우 테이블 행을 테이블 행으로 감싸고 싶지 않습니다.div. React.createClass({ render: function() { return ( Item 1 Item 2 ); } }); 두 번째 예에서는 다음 오류가 나타납니다.Adjacent XJS elements must be wrapped in an enclosing tag while ..

programing 2023.04.01

Formik 양식을 사용한 리액트 날짜 선택기

Formik 양식을 사용한 리액트 날짜 선택기 리액트 데이트 피커를 포믹 형태로 사용하려고 합니다. 다음과 같은 것이 있습니다. import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; class Fuate extends React.Component { state = { dueDate: new Date() } { return ( ... setFieldValue('dueDate', e)} /> setFieldValue("dueDate", date)} onTouch={setFieldTouched} /> 이 두 옵션 모두 양식은 달력에서 날짜를 선택할 수 있지만 상자에 나타나지 않으며 상태 값은 ..

programing 2023.04.01

렌더링 시 onClick이 호출되는 이유는 무엇입니까? - React.js

렌더링 시 onClick이 호출되는 이유는 무엇입니까? - React.js 작성한 컴포넌트가 있습니다. class Create extends Component { constructor(props) { super(props); } render() { var playlistDOM = this.renderPlaylists(this.props.playlists); return ( {playlistDOM} ) } activatePlaylist(playlistId) { debugger; } renderPlaylists(playlists) { return playlists.map(playlist => { return {playlist.playlist_name} }); } } function mapStateToProp..

programing 2023.04.01

리액트 네이티브에서 다이내믹한 스타일을 만들 수 있나요?

리액트 네이티브에서 다이내믹한 스타일을 만들 수 있나요? 다음과 같은 렌더링을 가진 구성 요소가 있다고 가정합니다. 여기서 jewelStyle = { borderRadius: 10, backgroundColor: '#FFEFCC', width: 20, height: 20, }, 배경색을 동적으로 랜덤하게 할당하려면 어떻게 해야 합니까?해봤어요 { borderRadius: 10, backgroundColor: getRandomColor(), width: 20, height: 20, }, 하지만 이렇게 하면 View의 모든 인스턴스가 동일한 색상을 가지므로 각각의 인스턴스가 고유해야 합니다. 팁이 있나요?저는 보통 다음과 같은 일을 합니다. ... jewelStyle = function(options) { ..

programing 2023.04.01

React JS에서 비동기/대기 사용이 가능합니까?

React JS에서 비동기/대기 사용이 가능합니까? 리액트 네이티브로 프로그래밍을 시작했고 다음 구문을 사용하는 데 익숙해졌습니다. async myFunction(){ ... return await otherFunction(); } 하지만 공유 패키지로 React JS 및 React Native와 호환되도록 하는 방법을 모르겠습니다.어떻게 하면 양쪽 플랫폼에서 동작하도록 할 수 있을까요? 감사합니다!create-react-app을 사용하여 빌드하는 경우 v0.2.3부터 사용 가능 https://github.com/facebookincubator/create-react-app/releases/tag/v0.2.3 다음과 같은 컴포넌트 내에서 사용할 수 있습니다. class App extends Compone..

programing 2023.03.27

스타일 컴포넌트와 리액트 부트스트랩?

스타일 컴포넌트와 리액트 부트스트랩? 리액트 부트스트랩과 함께 스타일 컴포넌트를 사용하는 방법이 있습니까?리액트 부트스트랩 노출bsClass대신 속성className스타일 구성 요소와 호환되지 않는 것으로 보이는 구성 요소의 경우. 경험이 있나요?부트스트랩에서 컴포넌트의 원래 스타일을 유지하면서 스타일을 확장할 수 있습니다.스타일드 컴포넌트와 함께 리액트 부트스트랩과 같은 서드파티 라이브러리를 사용하는 방법에 대한 자세한 내용은 여기를 참조하십시오. const StyledButton = styled(Button)` color: palevioletred; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; bo..

programing 2023.03.27

타입 'JSX'에 속성이 존재하지 않는다고 타이프 스크립트가 불만을 제기합니다.React.createClass를 사용할 때 'Intelligent Elements'를 선택하십시오.

타입 'JSX'에 속성이 존재하지 않는다고 타이프 스크립트가 불만을 제기합니다.React.createClass를 사용할 때 'Intelligent Elements'를 선택하십시오. 저는 레독스 어플리케이션을 작성하기 위해 타이프 스크립트를 사용하고 있습니다. var item = React.createClass({ render: function() { return (hello world) } }); export default class ItemList extends Component { render() { return () } } 그러면 타이프 스크립트가 다음과 같이 불만을 제기합니다. Property 'item' does not exist on type 'JSX.IntrinsicElements'. 구성 ..

programing 2023.03.27

JavaScript에서 ::(이중 콜론)은 무엇을 의미합니까?

JavaScript에서 ::(이중 콜론)은 무엇을 의미합니까? 이 질문에는 이미 답이 있습니다. JavaScript 이중 콜론(바인드 연산자) (1개의 답변) 닫힘6년 전에요. 리액트 앱에 다음과 같은 JSX 코드가 있습니다. ... _renderSignOutLink() { if (!this.props.currentUser) { return false; } return ( Sign out ); ... 이중결장이란 게 뭐죠?::함수를 호출하기 전을 의미합니까?그::는 바인드 함수에 디스큐거하는 제안된 바인딩 연산자입니다. ::foo.bar // becomes foo.bar.bind(foo) 이것은 React(및 기타 이벤트 핸들러)에서 도움이 됩니다.그 이유는 다음과 같습니다.this는 나중에 이벤트핸들러..

programing 2023.03.22

브라우저에서 런타임에 실행 중인 React 버전을 어떻게 알 수 있습니까?

브라우저에서 런타임에 실행 중인 React 버전을 어떻게 알 수 있습니까? 브라우저에서 React 런타임 버전을 알 수 있는 방법이 있나요?React.version이치노 다만, 문서화되어 있지 않기 때문에(내가 아는 한), 안정된 기능은 아닐 수 있습니다(즉, 가능성이 낮지만, 장래의 릴리스에서는 없어지거나 변경될 가능성이 있습니다). 「 」의 React( Import) const REACT_VERSION = React.version; let root = ReactDOM.createRoot(document.getElementById('root')); root.render( React version: {REACT_VERSION} ); 「 」의 React(「Import」) import { version } ..

programing 2023.03.22
반응형