Reactjs 如何在React中有条件地呈现动态创建的子组件？具体地说：通过JSON映射创建的组件_Reactjs

Reactjs 如何在React中有条件地呈现动态创建的子组件？具体地说：通过JSON映射创建的组件

reactjs

Reactjs 如何在React中有条件地呈现动态创建的子组件？具体地说：通过JSON映射创建的组件,reactjs,Reactjs,我通过JSON映射呈现一些组件，每个组件都包含一个div，该div还包含两个div及其各自的子组件。我希望“子组件a”中有一个按钮可以触发“子组件b”的显示/隐藏css类，但具体来说是与触发位置相关的实例，同时将逻辑保留在父级中。我的第一个想法是使用ID来有条件地设置类，但是我很难概念化逻辑。目前只使用钩子，对Redux不太熟悉，但有些事情告诉我这里可能需要这样做。有什么想法或指导吗上下文的更多细节：这是一个调色板应用程序，它从API中提取数据并渲染5种颜色。每个颜色（子组件a）都有一个按钮，

我通过JSON映射呈现一些组件，每个组件都包含一个div，该div还包含两个div及其各自的子组件。我希望“子组件a”中有一个按钮可以触发“子组件b”的显示/隐藏css类，但具体来说是与触发位置相关的实例，同时将逻辑保留在父级中。我的第一个想法是使用ID来有条件地设置类，但是我很难概念化逻辑。目前只使用钩子，对Redux不太熟悉，但有些事情告诉我这里可能需要这样做。有什么想法或指导吗

上下文的更多细节：这是一个调色板应用程序，它从API中提取数据并渲染5种颜色。每个颜色（子组件a）都有一个按钮，用于打开相应的编辑器（子组件b）。最初，我在颜色组件中有一个编辑器，它完全消除了这个问题，但后来我遇到了无法控制它们的冲突的问题（多个编辑器同时打开）。当然，我可以单独硬编码所有五（10）个组件，但我知道这不是正确的解决方案，并且会阻止未来的一些功能（例如动态控制颜色数量）

我在这里遇到的另一个问题是，作为道具向下传递useState值不会在子对象中转换（editorVisible）。例如，父级中的console.log（editorVisible）返回其布尔值，但子级中返回未定义的值。也可以在这里使用一些见解

父代码：正如预期的那样，此代码为所有五个编辑器设置类。我需要一个解决方案来分别针对它们，同时通过贴图维护渲染：

const ComposerPane = () => {
  const colors = data
  const [editorVisible, setEditorVisible] = useState()
  const [editorInitialClass, setEditorInitialclass] = useState('editor-container-initial')

  const toggle = () => {
    console.log(editorVisible)
    setEditorVisible(!editorVisible)
    setEditorInitialclass('editor-animate-return')
  }
  
  const editColor = (e) => {
    console.log(e.target.value)
  }

  return (
    <div className='composer-container'>
      {colors.map((color) => (
        <div key={color.id} className='composer-fix'>
          <div className="color-comp-container">
            <ColorComp
              id={color.id}
              red={color.red}
              green={color.green}
              blue={color.blue}
              hex={color.hex}
              toggle={toggle}
            />
          </div>
          <div className={
            editorVisible ?
              'editor-container editor-animate' :
              `${editorInitialClass} editor-container`
          }>
            <Editor
              id={color.id}
              red={color.red}
              green={color.green}
              blue={color.blue}
              hex={color.hex}
              editColor={editColor}
              editorVisible={editorVisible}
              editorInitialClass={editorInitialClass}
            />
          </div>
        </div>
      ))}
    </div>
  )
}

const composer窗格=（）=>{
常量颜色=数据
常量[editorVisible，setEditorVisible]=useState（）
const[editorInitialClass，setEditorInitialclass]=useState（'editor-container-initial'）
常量切换=（）=>{
console.log（editorVisible）
setEditorVisible（！editorVisible）
setEditorInitialclass（'editor-animate-return'）
}
常量editColor=（e）=>{
console.log（例如target.value）
}
返回(
{colors.map（（颜色）=>(
))}
)
}

以及单个颜色子组件：

const ColorComp = ({ id, red, green, blue, hex, toggle, editorVisible, editorInitialClass }) => {

  // Sets new color to color object
  const BGcolorValue = Color.rgb(parseInt(red), parseInt(green), parseInt(blue))

  // Background-color css
  const BGColor = { backgroundColor: `rgb(${red}, ${green}, ${blue})` }

  // Sets text and icon color value based on background
  const foreColor = BGcolorValue.isLight() ? 'rgba(0,0,0,.5)' : 'rgba(255,255,255,.5)'

  // CSS values
  const hexStyle = { color: foreColor }
  const indicatorStyle = { backgroundColor: foreColor }
  const iconFillStyle = { fill: foreColor }

  return (
    <div className='color-comp' style={BGColor}>
      <div className={editorVisible ?
        'editorIndicatorContainer editor-animate' :
        `${editorInitialClass} editorIndicatorContainer`
      }>
        <p className='hexIndicator' style={hexStyle}>#{hex.toUpperCase()}</p>
        <div className='editorIndicator' style={indicatorStyle} />
      </div>
      <CustomButton
        onClick={() => {
        toggle();
        console.log(editorVisible);
        }}
        foreColor={foreColor}
        className='editorIcon'
        style={iconFillStyle}><EditorIcon /></CustomButton>
    </div>
  )
}

const Editor = ({ id, red, green, blue, editColor }) => {
  return (
  <div className='editor' id={id}>
    <div className='EditorPane'>
      <button className='EditorButton Done'>DONE</button>
      <div className='Slider'>
        <p className='SliderLabel'>R:</p>
        <input className='SliderInput' type='text' value={red} onChange={editColor}></input>
        <input className='EditorSlider' name='red' type='range' min='0' max='255' value={red} onChange={editColor}/>
      </div>
      <div className='Slider'>
        <p className='SliderLabel'>G:</p>
        <input className='SliderInput' type='text' value={green} onChange={editColor}></input>
        <input className='EditorSlider' name='green' type='range' min='0' max='255' value={green} onChange={editColor}/>
      </div>
      <div className='Slider'>
        <p className='SliderLabel'>B:</p>
        <input className='SliderInput' type='text' value={blue} onChange={editColor}/>
        <input className='EditorSlider' name='blue' type='range' min='0' max='255' value={blue} onChange={editColor}/>
      </div>
    </div>
  </div>
  )
}

constcolorcomp=（{id，红色，绿色，蓝色，十六进制，切换，editorVisible，editorInitialClass}）=>{
//将新颜色设置为颜色对象
const BGcolorValue=Color.rgb（parseInt（红色）、parseInt（绿色）、parseInt（蓝色））
//背景色css
const BGColor={backgroundColor:`rgb（${red}，${green}，${blue}）`
//基于背景设置文本和图标颜色值
const foreColor=BGcolorValue.isLight（）？'rgba（0,0,0,5）''rgba（255255255,5）'
//CSS值
常量hextstyle={color:foreColor}
常量指示符样式={backgroundColor:foreColor}
常量iconFillStyle={fill:foreColor}
返回(
{hex.toUpperCase（）}
{
切换（）；
console.log（editorVisible）；
}}
前景色={foreColor}
className='editorIcon'
样式={iconFillStyle}>
)
}

编辑器组件：

const ColorComp = ({ id, red, green, blue, hex, toggle, editorVisible, editorInitialClass }) => {

  // Sets new color to color object
  const BGcolorValue = Color.rgb(parseInt(red), parseInt(green), parseInt(blue))

  // Background-color css
  const BGColor = { backgroundColor: `rgb(${red}, ${green}, ${blue})` }

  // Sets text and icon color value based on background
  const foreColor = BGcolorValue.isLight() ? 'rgba(0,0,0,.5)' : 'rgba(255,255,255,.5)'

  // CSS values
  const hexStyle = { color: foreColor }
  const indicatorStyle = { backgroundColor: foreColor }
  const iconFillStyle = { fill: foreColor }

  return (
    <div className='color-comp' style={BGColor}>
      <div className={editorVisible ?
        'editorIndicatorContainer editor-animate' :
        `${editorInitialClass} editorIndicatorContainer`
      }>
        <p className='hexIndicator' style={hexStyle}>#{hex.toUpperCase()}</p>
        <div className='editorIndicator' style={indicatorStyle} />
      </div>
      <CustomButton
        onClick={() => {
        toggle();
        console.log(editorVisible);
        }}
        foreColor={foreColor}
        className='editorIcon'
        style={iconFillStyle}><EditorIcon /></CustomButton>
    </div>
  )
}

const Editor = ({ id, red, green, blue, editColor }) => {
  return (
  <div className='editor' id={id}>
    <div className='EditorPane'>
      <button className='EditorButton Done'>DONE</button>
      <div className='Slider'>
        <p className='SliderLabel'>R:</p>
        <input className='SliderInput' type='text' value={red} onChange={editColor}></input>
        <input className='EditorSlider' name='red' type='range' min='0' max='255' value={red} onChange={editColor}/>
      </div>
      <div className='Slider'>
        <p className='SliderLabel'>G:</p>
        <input className='SliderInput' type='text' value={green} onChange={editColor}></input>
        <input className='EditorSlider' name='green' type='range' min='0' max='255' value={green} onChange={editColor}/>
      </div>
      <div className='Slider'>
        <p className='SliderLabel'>B:</p>
        <input className='SliderInput' type='text' value={blue} onChange={editColor}/>
        <input className='EditorSlider' name='blue' type='range' min='0' max='255' value={blue} onChange={editColor}/>
      </div>
    </div>
  </div>
  )
}

const编辑器=（{id，红色，绿色，蓝色，editColor}）=>{
返回(
完成
R:
G:
B:
)
}

为了给您指明正确的方向，您可以通过将激活的颜色ID存储在状态而不是

编辑器可见

布尔值来解锁大量电源。如果编辑器应该关闭，请将

activeColorId

状态设置为

null

。这一部分状态现在告诉您是否显示编辑器，以及触发编辑器的颜色。您可以传递该ID并执行一些很酷的操作，例如高亮显示活动色样。你不需要Redux：）啊，谢谢，这很有道理，可以试一试。