반응형

reactjs 37

리액트: DOM 리액트를 얼마나 조작할 수 있습니까?

리액트: DOM 리액트를 얼마나 조작할 수 있습니까? 이게 내가 하는 일이야: jsfiddle 중요한 섹션은 다음과 같습니다. position: function() { var container = $(this.getDOMNode()); this._menu = $(this.refs.menu.getDOMNode()); this._menu.appendTo(document.body). offset({ top: container.offset().top + container.outerHeight(), left: container.offset().left }); }, restore: function() { this._menu.appendTo(this.getDOMNode()); }, componentWillUpdate..

programing 2023.03.02

컴포넌트에 고유 키를 부여할 때 Math.random()을 사용하여 해당 키를 생성해도 될까요?

컴포넌트에 고유 키를 부여할 때 Math.random()을 사용하여 해당 키를 생성해도 될까요? 문제는 다음과 같습니다. 수천 개의 요소 목록 형식의 데이터를 가지고 있습니다.그 중에는 중복되는 것도 있기 때문에, 중복되는 키가 있는 경우도 있습니다.수에 ID를 사용해도 요?Math.random()대?? 제가 알기로는 키는 주로 컴포넌트를 구별하기 위해 반응으로 사용됩니다.내 코드에 있는 키와 전혀 관련이 없는 한, 이 일은 잘 될 거라고 생각해.중복되는 숫자가 없도록 하기 위해 두 개의 산술 난수를 서로 나누어 거의 확실하게 고유한 키를 얻는 것이 좋습니다. 이게 좋은 방법인가요?아무 걱정 없이 사용할 수 있나요?컴포넌트의 키가 변경될 때마다 React는 현재 컴포넌트 인스턴스를 업데이트하지 않고 새 ..

programing 2023.03.02

반응하는 라디오 버튼을 기본값으로 켜려면 어떻게 해야 합니까?

반응하는 라디오 버튼을 기본값으로 켜려면 어떻게 해야 합니까? 초기값이 참인지 라디오 버튼을 체크하려면 어떻게 해야 합니까?사용방법defaultChecked속성, 사용 가능그리고.- https://reactjs.org/docs/uncontrolled-components.html#default-values 경우에 따라서는 name Atribute를 삭제하고 대신 조건부 체크값을 사용하여 문제를 해결할 수 있습니다. Medium Large 출처 : https://magnusbenoni.com/radio-buttons-react/를 추가합니다.checked예를 들어 라디오 버튼의 속성을 지정합니다.checked={field.input.value}[JS빈]여기서 default Checked를 추가하는 것은 체크..

programing 2023.03.02

html을 반응으로 안전하게 렌더링하는 방법

html을 반응으로 안전하게 렌더링하는 방법 텍스트 영역에서 사용자가 html 마크업을 생성했는데 화면 다른 부분에 렌더링하고 싶습니다.마크업은 컴포넌트의 소품에 문자열로 저장됩니다. 나는 명백한 이유로 위험하게 sethtml을 사용하고 싶지 않다.스크립트 태그 및 기타 비활성 html을 제거하기 위해 html을 위한 마킹된 파서가 있습니까? sanitize-html 모듈을 사용하여 html을 삭제하고 위험하게 sanitized 문자열을 렌더링합니다.SetInnerHTML. 간단한 래퍼 컴포넌트를 생성할 수 있습니다. const defaultOptions = { allowedTags: [ 'b', 'i', 'em', 'strong', 'a' ], allowedAttributes: { 'a': [ 'hre..

programing 2023.03.02

JSX 및 Lodash를 사용하여 요소를 n회 반복하는 방법

JSX 및 Lodash를 사용하여 요소를 n회 반복하는 방법 원하는 것을 이루기 위해 앱에서 React/JSX와 Lodash를 사용하고 있습니다. 상태에 따라 요소를 일정 횟수 반복해야 합니다.어떻게 하면 좋을까요? 요소는 다음과 같습니다. ♦; 그리고 이렇게 할당한다: let card; if (data.hand === '8 or more cards') { card = ♦; } 그래서 이 경우, 저는 이 요소를 반복해야 합니다.8Lodash를 사용하는 프로세스는 무엇입니까?외부 라이브러리를 사용하지 않고 이를 수행하는 가장 빠른 방법은 다음과 같습니다. const n = 8; // Or something else [...Array(n)].map((e, i) => ♦) lodash 또는 ES6 확산 구문을..

programing 2023.02.25

useDispatch() 오류: react-redux 컨텍스트 값을 찾을 수 없습니다.컴포넌트가 로 둘러싸여 있는지 확인하십시오.

useDispatch() 오류: react-redux 컨텍스트 값을 찾을 수 없습니다.컴포넌트가 로 둘러싸여 있는지 확인하십시오. React-Redux 라이브러리를 사용하려고 하는데 제목에 오류가 나타납니다.Provider로 컴포넌트를 랩했지만 useDispatch() 훅을 구현한 경우에만 오류가 발생합니다. use Dispatch() 행을 추가할 때까지 앱은 정상적으로 동작했습니다.디스패치 기능에 관한 나머지 행은 삭제해도 같은 에러가 발생합니다. 도와주시면 감사하겠습니다.감사해요. 코드는 다음과 같습니다. import 'react-native-gesture-handler'; import {NavigationContainer} from '@react-navigation/native'; import Na..

programing 2023.02.25

클래스 기반 컴포넌트에서 React.forwardRef를 사용하는 방법

클래스 기반 컴포넌트에서 React.forwardRef를 사용하는 방법 React.forwardRef를 사용하려고 하는데 클래스 기반 컴포넌트(HOC가 아닌)에서 작동하는 방법을 고민하고 있습니다. 문서 예제에서는 요소 및 기능 구성 요소를 사용하며, 심지어 상위 구성 요소에 대한 함수 클래스를 래핑합니다. 그래서 이런 거부터 시작해서ref.js파일: const TextInput = React.forwardRef( (props, ref) => () ); 대신 다음과 같이 정의합니다. class TextInput extends React.Component { render() { let { props, ref } = React.forwardRef((props, ref) => ({ props, ref }));..

programing 2023.02.25
반응형