主页 / 问题 / 1426151
Accepted
dotagenius
Asked:2022-09-03 02:40:38 +0800 CST2022-09-03 02:40:38 +0800 CST

如何在 useContext React 中使用组件？

  • 772

项目结构如下图所示： stage 是来自 KonvaJS 的一个场景；layer 和 rect 也是 conva 对象；控制块只是一个带有按钮的 div。

我不知道如何做到这一点，以便当您单击右侧块中的按钮时，左侧块中矩形的颜色会随着useContext.

在应用程序中这样做

import React, {useRef, useState} from "react";
import LeftBlockfrom "../LeftBlock/LeftBlock";
import ControlBlock from "../ControlBlock/ControlBlock";
import {StageContext} from "../../context";
import {Layer, Rect, Stage} from "react-konva";

function App() {
    const [stage, setStage] = useState(
        <Stage width={500} height={500}>
            <Layer>
                <Rect width={500} height={500} />
            </Layer>
        </Stage>
    );

    return (
        <StageContext.Provider value={stage}>
            <LeftBlock />
            <ControlBlock />
        </StageContext.Provider>
    );
}

export default App;

这是上下文

import {createContext} from 'react';

export const StageContext = createContext(null);

这是左块中的场景本身

const KonvaStage = () => {
    const stage = useContext(StageContext);
    return (
        {stage}
    );
};

在这种情况下，控制台写道：Uncaught Error: Objects are not valid as a React child (found: object with keys {Stage}). If you meant to render a collection of children, use an array instead.

我做错了什么以及如何在舞台上设置按钮和矩形之间的交互？

javascript reactjs

1 个回答

  1. Best Answer

    让我解释一下主要逻辑是如何工作的：

    • 声明上下文const ColorContext = createContext()
    • 包装将在标签中使用此上下文的元素ColorContext.Provider
    • 我们将值声明为一个对象，其中 1 个字段用于颜色值，1 个方法用于更新颜色value={{color, setColor}}
    • 在任何子组件中，我们都会得到一个字段或方法，这取决于谁需要什么。例如，按钮知道它现在是什么颜色并不重要，它的工作只是分配所需的颜色，所以它只使用更新颜色方法const {setColor} = useContext(ColorContext)。块本身并不关心颜色更新的对象和方式，重要的是它只知道当前颜色，因此它只使用颜色值所在的字段const {color} = useContext(ColorContext)

    编码：

    const {useState, useContext, createContext} = React;

const ColorContext = createContext();

const Button = ({text, changeValue}) => {
  const {setColor} = useContext(ColorContext);
  
  return (
    <button onClick={() => setColor(changeValue)}>{text}</button>
  )
}

const ButtonsBlock = () => {  
  return (
    <React.Fragment>
      <Button text={'Red'} changeValue={'red'} />
      <Button text={'Green'} changeValue={'green'} />
      <Button text={'Blue'} changeValue={'blue'} />
    </React.Fragment>
  )
}

const Block = () => {  
  const {color} = useContext(ColorContext);
  
  return (
    <div className='block' style={{border: `2px solid ${color}`}}></div>
  )
}

const App = () => {
  const [color, setColor] = useState('red');
  
  return (
    <ColorContext.Provider  value={{color, setColor}}>
      <Block />
      <ButtonsBlock />
    </ColorContext.Provider>
  )
};

ReactDOM.render(
  <App />,
  document.getElementById('root')
)
    body {
  background-color: #777;
}

.block {
  width: 50px;
  height: 50px;
  margin-bottom: 8px;
}
    <div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>

    • 1

相关问题