如何从反应中的子组件内部更改父组件的背景颜色,盖茨比

Posted

技术标签:

【中文标题】如何从反应中的子组件内部更改父组件的背景颜色,盖茨比【英文标题】:How to change the background color of a parent component from inside a child component in react, gatsby 【发布时间】:2021-12-04 02:49:38 【问题描述】:

我正在使用 react,gatsby,我有 2 个组件

const Landing = (  children ) => 
    return (
        <div className=container>
            <div className=wrapper>
                <ZoneButton zone='pink' icon='child' />
                <ZoneButton zone='blue' icon='code' />
            </div>
        </div>
    )

还有,

const ZoneButton = ( zone, icon ) => 

    const colourPrimaryDict = 
        'pink': 'var(--pastel-pink-primary)',
        'blue': 'var(--pastel-blue-primary)'

    
    const colourSecondaryDict = 
        'pink': 'var(--pastel-pink-secondary)',
        'blue': 'var(--pastel-blue-secondary)'
    
    const svgDict = 
        'code': <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="code" className="svg-inline--fa fa-code fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"/></svg>,
        'child': <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="child" className="svg-inline--fa fa-child fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M120 72c0-39.765 32.235-72 72-72s72 32.235 72 72c0 39.764-32.235 72-72 72s-72-32.236-72-72zm254.627 1.373c-12.496-12.497-32.758-12.497-45.254 0L242.745 160H141.254L54.627 73.373c-12.496-12.497-32.758-12.497-45.254 0-12.497 12.497-12.497 32.758 0 45.255L104 213.254V480c0 17.673 14.327 32 32 32h16c17.673 0 32-14.327 32-32V368h16v112c0 17.673 14.327 32 32 32h16c17.673 0 32-14.327 32-32V213.254l94.627-94.627c12.497-12.497 12.497-32.757 0-45.254z"/></svg>
    

    return (
        <div className=container style=
            backgroundColor: colourPrimaryDict[zone],
            color: colourSecondaryDict[zone]
         onClick= /* What do I put here */ >
            svgDict[icon]
        </div>
    )

如何才能点击 ZoneButton,然后更改 Landing 组件中容器 className 的背景颜色。

【问题讨论】:

【参考方案1】:

你可以这样做:

const ZoneButton = ( zone, icon ) => 

    let [colourPrimaryDict, setColourPrimaryDict] = React.useState(
        'pink': 'var(--pastel-pink-primary)',
        'blue': 'var(--pastel-blue-primary)'
    )

    let [colourSecondaryDict, setColourSecondaryDict] = React.useState(
        'pink': 'var(--pastel-pink-secondary)',
        'blue': 'var(--pastel-blue-secondary)'
    ) 
    const svgDict = 
        'code': <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="code" className="svg-inline--fa fa-code fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"/></svg>,
        'child': <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="child" className="svg-inline--fa fa-child fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M120 72c0-39.765 32.235-72 72-72s72 32.235 72 72c0 39.764-32.235 72-72 72s-72-32.236-72-72zm254.627 1.373c-12.496-12.497-32.758-12.497-45.254 0L242.745 160H141.254L54.627 73.373c-12.496-12.497-32.758-12.497-45.254 0-12.497 12.497-12.497 32.758 0 45.255L104 213.254V480c0 17.673 14.327 32 32 32h16c17.673 0 32-14.327 32-32V368h16v112c0 17.673 14.327 32 32 32h16c17.673 0 32-14.327 32-32V213.254l94.627-94.627c12.497-12.497 12.497-32.757 0-45.254z"/></svg>
    

    let changeColor = () => 
        //Change your color here
        setColourPrimaryDict(
            'pink': 'var(--pastel-pink-primary)',
            'blue': 'var(--pastel-blue-primary)'
        )
    
    return (
        <div className=container style=
            backgroundColor: colourPrimaryDict[zone],
            color: colourSecondaryDict[zone]
         onClick= () => changeColor() >
            svgDict[icon]
        </div>
    )

点击时只需更改状态值。

【讨论】:

【参考方案2】:

就是这么简单。您只需了解绕过组件中的道具的反应中发生了什么。这是一个小的 sn-p,以便更好地理解。

改变传入的props state值,由父组件发送或使用redux进行全局声明

父组件

function App()  
  const [data, setData] = useState("#fff")
       return (
      <div style=
           backgroundColor: data
      >
         <Test  setData=setData/>
      </div>)

子组件

function Test(passedProps) 
   let setData  = passedProps
   return (<button onClick=() => setData("#f1f1f1") >click to change color</button>);

【讨论】:

【参考方案3】:

试试这个

在父组件 (Landing) 中定义一个状态 (bgColor) 并将控制器 (setBgColor) 传递给子组件(按钮)。

import  useState  from "react";

const Landing = (  children ) => 

    const [ bgColor, setBgColor ] = useState("blue");

    return (
        <div className=container style= backgroundColor: bgColor >
            <div className=wrapper>
                <ZoneButton zone='pink' icon='child' setBgColor=setBgColor/>
                <ZoneButton zone='blue' icon='code' setBgColor=setBgColor/>
            </div>
        </div>
    )

根据zone设置bgColor

const ZoneButton = ( zone, icon ) => 

    const colourPrimaryDict = 
        'pink': 'var(--pastel-pink-primary)',
        'blue': 'var(--pastel-blue-primary)'

    
    const colourSecondaryDict = 
        'pink': 'var(--pastel-pink-secondary)',
        'blue': 'var(--pastel-blue-secondary)'
    
    const svgDict = 
        'code': <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="code" className="svg-inline--fa fa-code fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"/></svg>,
        'child': <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="child" className="svg-inline--fa fa-child fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M120 72c0-39.765 32.235-72 72-72s72 32.235 72 72c0 39.764-32.235 72-72 72s-72-32.236-72-72zm254.627 1.373c-12.496-12.497-32.758-12.497-45.254 0L242.745 160H141.254L54.627 73.373c-12.496-12.497-32.758-12.497-45.254 0-12.497 12.497-12.497 32.758 0 45.255L104 213.254V480c0 17.673 14.327 32 32 32h16c17.673 0 32-14.327 32-32V368h16v112c0 17.673 14.327 32 32 32h16c17.673 0 32-14.327 32-32V213.254l94.627-94.627c12.497-12.497 12.497-32.757 0-45.254z"/></svg>
    

    return (
        <div className=container style=
            backgroundColor: colourPrimaryDict[zone],
            color: colourSecondaryDict[zone]
         onClick=() => setBgColor(zone)>
            svgDict[icon]
        </div>
    )

如果需要,您可以使用它来更改className

【讨论】:

以上是关于如何从反应中的子组件内部更改父组件的背景颜色,盖茨比的主要内容,如果未能解决你的问题,请参考以下文章

反应无状态子组件不会更新父组件中的状态更改

如何在反应js中更改按钮onClick的背景颜色?

如何在iOS上更改UISearchBar组件的内部背景颜色

从子组件更改事件 v-data-table 行的背景

反应组件中的盖茨比静态查询不返回任何数据

react-native 如何在子组件中获取父组件背景颜色