리액트 컴포넌트 버튼 클릭시 색 변경 도와주세요ㅠㅠ

Question

import React, { createContext, useCallback, useState } from 'react'; const ColorContext = createContext({ state : { color : 'inherit'}, actions : { setColor : () => {}, }, }); const ColorProvider = ({children}) => { const [color, setColor] = useState('white'); const value = { state : { color }, actions : { setColor }, }; return ( {children} ); }; const { Consumer : ColorConsumer } = ColorContext; export { ColorProvider, ColorConsumer }; export default ColorContext;Color.jsimport React, { useContext,useState } from 'react' import ColorContext, {ColorConsumer} from './Color'; import option_ico from '../image/option.png'; import Option from './Option'; const Note = () => { const {state} = useContext(ColorContext); const [option_dropdown, setOption] = useState(false); return( <>

{option_dropdown &&

) } export default NoteNote.jsimport '../main.css'; import ColorRevise from './Color_revise'; import React, { useState } from "react"; import { ColorProvider } from './Color'; function Option() { const [color, setColor] = useState(false); return (

{color && } {이곳에 넣고 싶어요..}

) } export default Option;Option.js리액트 초보라서 프로젝트 공부하면서 만들고 있는데 버튼 클릭하면 배경색 변경하는 것을 어느 블로그를 보면서 공부하면서 하고 있거든요..그런데 위에 있는 Note.js에서 left 배경색을 컬러 클릭시 변경하고 싶은데 Option.js에서 어떻게 불러와야할지 모르겠어서요ㅠㅠNote 컴포넌트를 불러오면 하나 더 생기기만 하고 본래의 있는 Note는 그대로라서 Note가 더 만들어지지 않고 클릭 시에 배경색을 바꿀 수 있는 방법이 있을까요?? 도와주시면 감사하겠습니다ㅠㅠ

으악 또 · Answer

일반적으로 라이브러리 없이는 하위가 상위에게 행위를 하기 위해서는 상위에서 함수를 넘겨줘야합니다. 이렇게 상위가 하위에게 뭔가를 넘겨주는 것 뿐만 아니라 component간의 데이터를 넘겨주는걸 props라고 합니다 react props라고 검색해보세요 //a.js 라고 가정 class Board extends React.Component { renderSquare(i) { return ; } passData(data={}){ this.setState(data); } } //b.js라고 class Square extends React.Component { Click(){ const {passwData} = this.props; passData({a:1}); } render() { return ( <> ); } }//둠칫따당님이 알려주신 방법임

리액트 컴포넌트 버튼 클릭시 색 변경 도와주세요ㅠㅠ

1개의 답변

#div 목록