반응형

    input + input {
      margin-top: 10px;
    }

반응형
저작자표시

'html, css > css selector' 카테고리의 다른 글

.popupModal [class="image"] exact css class match  (0) 2024.06.18
.table { td:nth-child(2n+2) {background-color: var(--Light-Gray-BG);}} 테이블 row 짝수마다 색깔 다르게  (0) 2024.04.19
css selector(#id,.class, 자손,>자식), table tag  (0) 2019.04.19
반응형

input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`

반응형
저작자표시
반응형

https://codesandbox.io/s/explorer-l44v98?file=/index.js

 

Explorer - CodeSandbox

Explorer by fir0j using antd, react, react-dom, react-icons, react-scripts, styled-components

codesandbox.io

 

위 소스는 자식이 2개 이상 있으면 2개가 한꺼번에 오픈되는 에러 있음, 아래는 에러 수정한 버젼

import React, { Fragment, useEffect, useState } from "react";
import { IoMdArrowDropright } from "react-icons/io";
import { MdArrowDropDown } from "react-icons/md";
import styled from "styled-components";

const SelectParent = styled.div`
  padding: 7px 7px;
  background-color: darkblue;
  width: max-content;
  border-radius: 4px;
  margin-top: 4px;
  font-weight: bolder;
  color: white;
  cursor: pointer;
`;

const Selectname = styled.div`
  margin-top: 5px;
  padding: 7px 7px;
  width: fit-content;
  border-radius: 4px;
  cursor: default;
  color: darkblue;
  :hover {
    background-color: #bdbaba3c;
  }
`;

const Explorer = ({ parent = [], onParentClick, onNameClick /*expandOnHover = false*/ }) => {
  const [newData, setNewData] = useState([]);

  useEffect(() => {
    setNewData(parent.map((n) => ({ ...n, expand: false })));
  }, [parent]);

  const handleClickOnParent = (e, data) => {
    e.stopPropagation();
    if (onParentClick && onParentClick instanceof Function) onParentClick(data);

    const clickIdx = newData.findIndex((n) => data.name === n.name);
    const clickItem = newData.find((n) => data.name === n.name);

    setNewData([...newData.slice(0, clickIdx), { ...clickItem, expand: !clickItem.expand }, ...newData.slice(clickIdx + 1, newData.length)]);
  };

  const handleClickOnName = (e, data) => {
    e.stopPropagation();

    if (onNameClick && onNameClick instanceof Function) onNameClick(data);
  };

  return (
    <>
      {newData.map((item) => (
        <Fragment key={item.name}>
          {item.children && item.children.length ? (
            <Fragment /*key={index}*/>
              <SelectParent /*onMouseOver={() => (expandOnHover ? setExpand(true) : {})}*/ onClick={(e) => handleClickOnParent(e, item)}>
                {item.name} <span>{!item.expand ? <IoMdArrowDropright /> : <MdArrowDropDown />} </span>
              </SelectParent>

              {item.expand ? (
                <div style={{ paddingLeft: "1.5rem" }}>
                  <Explorer parent={item.children} onParentClick={onParentClick} onNameClick={onNameClick} /*expandOnHover={expandOnHover}*/ />
                </div>
              ) : null}
            </Fragment>
          ) : (
            <Selectname onClick={(e) => handleClickOnName(e, item)}>{item.name}</Selectname>
          )}
        </Fragment>
      ))}
    </>
  );
};

export default Explorer;
반응형
저작자표시

'react' 카테고리의 다른 글

react agGrid  (0) 2024.06.20
react createContext, useContext,  (0) 2024.05.17
react map key 설정안해주면 eiSettings + - 제대로 동작안했던듯  (0) 2024.05.14
Promise결과를 받아서 useMemo에 저장후 사용하려 하면 에러남, useState로 저장후에 useEffect로 감지하려고 해도 에러남  (0) 2024.04.08
[페이지전환]react-router-dom<Link> window.href.location history.push()...  (0) 2024.03.27
반응형

rowspan 사용예제

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holiday!</th>
  </tr>
  <tr>
    <td rowspan="2">January</td>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td rowspan="2">February</td>
    <td>11</td>
    <td>22</td>
  </tr>
  <tr>
    <td>33</td>
    <td>44</td>
  </tr>
</table>

 

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_rowspan

 

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_colspan

반응형
저작자표시

'html, css' 카테고리의 다른 글

word-break: normal, break-all, keep-all  (0) 2024.06.21
style={{width: undefined}} 이면 css 반영안됨  (0) 2024.06.18
.required:after { content:" *"; color: red; }  (0) 2024.06.04
정렬문제 간단히 display:flex, align-items:center로 해결  (0) 2024.05.30
error message 노출가능한 input은 errorText는 고정시키고{visibility:error?'visible','hidden'}로 조정해야함, 그냥 text없이 <div/>가 되면 height=0되고, display:none이용하면 tag자체가 없어져 화면이 번쩍이게 됨  (0) 2024.05.07
반응형
.popupModal [class="image"] {
    text-align: center;
  }
반응형
저작자표시

'html, css > css selector' 카테고리의 다른 글

두번째 input부터만적용 input + input { margin-top: 10px; }  (0) 2024.06.20
.table { td:nth-child(2n+2) {background-color: var(--Light-Gray-BG);}} 테이블 row 짝수마다 색깔 다르게  (0) 2024.04.19
css selector(#id,.class, 자손,>자식), table tag  (0) 2019.04.19
반응형

 

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

반응형
저작자표시

'js > js syntax' 카테고리의 다른 글

(Nullish coalescing??: null,undefined일때만) vs (||: falsy-null,undefined,0,'',NaN..)  (0) 2024.06.18
How to create an array containing 0...N-1: [...Array(N).keys()], Array.from(Array(N).keys())  (0) 2024.04.18
[js regex] /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/ 8자리이상 문자,숫자,특수문자 포함  (0) 2024.04.01
[js regex] /^\d{1,7}$/.test('string') 'string'이 1에서7자리 자연수인지 체크 (최대7자리수까지 입력가능하도록 체크)  (0) 2024.04.01
[numberCheck] /^\d+$/.test(확인대상-문자열, 문자열아니면 문자열로 자동변환) Number.isInteger(확인대상-숫자, 그중에서도 정수만 true 1.0도 true)  (0) 2024.04.01
반응형

const a = arg||'default' 주로 이렇게 초기화용도로 쓰는데 0, ''도 정상값일 경우는 ??를 쓰면 됨

 

Nullish coalescing operator

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing

 

Logical or operator

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR

 

 

반응형
저작자표시

'js > js syntax' 카테고리의 다른 글

Optional chaining (?.)  (0) 2024.06.18
How to create an array containing 0...N-1: [...Array(N).keys()], Array.from(Array(N).keys())  (0) 2024.04.18
[js regex] /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/ 8자리이상 문자,숫자,특수문자 포함  (0) 2024.04.01
[js regex] /^\d{1,7}$/.test('string') 'string'이 1에서7자리 자연수인지 체크 (최대7자리수까지 입력가능하도록 체크)  (0) 2024.04.01
[numberCheck] /^\d+$/.test(확인대상-문자열, 문자열아니면 문자열로 자동변환) Number.isInteger(확인대상-숫자, 그중에서도 정수만 true 1.0도 true)  (0) 2024.04.01
반응형

style={{width: n.position?.width||'100%'}} 로 구지 안해도 style={{width: n.position?.width}} 만 하면 됨, n.position이 null이면 n.position?.width는 undefined가 되므로

반응형
저작자표시

'html, css' 카테고리의 다른 글

word-break: normal, break-all, keep-all  (0) 2024.06.21
table <td rowspan="2"> 2row를, <td colspan="2"> 2column을 차지한다는 얘기  (0) 2024.06.18
.required:after { content:" *"; color: red; }  (0) 2024.06.04
정렬문제 간단히 display:flex, align-items:center로 해결  (0) 2024.05.30
error message 노출가능한 input은 errorText는 고정시키고{visibility:error?'visible','hidden'}로 조정해야함, 그냥 text없이 <div/>가 되면 height=0되고, display:none이용하면 tag자체가 없어져 화면이 번쩍이게 됨  (0) 2024.05.07
반응형

TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at editorwatchdog.js:179:1
    at async u._initializeEditor (index.js:5:4518)
    at async u.componentDidMount (index.js:5:3736) {phase: 'initialization', willEditorRestart: false}phase: "initialization"willEditorRestart: false[[Prototype]]: Object
(anonymous) @ index.js:5
Promise.catch (async)
_initializeEditor @ index.js:5
await in _initializeEditor (async)
componentDidMount @ index.js:5
commitLayoutEffectOnFiber @ react-dohttp://m.development.js:23349
commitLayoutMountEffects_complete @ react-dohttp://m.development.js:24727
commitLayoutEffects_begin @ react-dohttp://m.development.js:24713
commitLayoutEffects_begin @ react-dohttp://m.development.js:24695
commitLayoutEffects @ react-dohttp://m.development.js:24651
commitRootImpl @ react-dohttp://m.development.js:26862
commitRoot @ react-dohttp://m.development.js:26721
performSyncWorkOnRoot @ react-dohttp://m.development.js:26156
flushSyncCallbacks @ react-dohttp://m.development.js:12042
(anonymous) @ react-dohttp://m.development.js:25690
Show 13 more frames
Show less

 

 

Cannot read properties of null (reading 'model') TypeError: Cannot read properties of null (reading 'model') at http://localhost:3000/app.2d361dd0ad882d7da2b1.min.js:289211:20

 

 

 

https://github.com/ckeditor/ckeditor5-react/issues/442

 

TypeError: Cannot read properties of null (reading 'model') · Issue #442 · ckeditor/ckeditor5-react

I'm trying to implement CKEditor 5 to my Nextjs project using this guide: https://ckeditor.com/docs/ckeditor5/latest/installation/integrations/next-js.html However when I try to run the webpage sho...

github.com

 

반응형
저작자표시
반응형

import { parse } from "node-html-parser";
dangerouslySetInnerHTML={{ __html: parse(n.content)?.toString() }} 원래 소스에는 parse를 적용했는데 안해도 나왔음

반응형
저작자표시

+ Recent posts

티스토리툴바