4

我正在尝试更流利地了解 React 如何传递信息，然后出现了这个测试用例：

我有一个由 Canvas 对象和不定数量的子对象组成的组件。我想让孩子们访问这个组件的画布上下文。

我想知道我是否可以给组件一个带有画布上下文的 React Context 并用它包装孩子，然后让各个孩子选择成为消费者。但是，我不习惯 React 或其生命周期，不知道如何正确地做到这一点。我完全没有了？这甚至可能吗？

这是有问题的组件：

const CanvasContext = React.createContext('default');
class Screen extends React.Component
{    

  render(){

    return (<div>
              <canvas id="myCanvas" ref={(c) => this.context = c.getContext('2d')} width="200" height="100" style={{border: '1px solid black'}}></canvas> 
              <CanvasContext.Provider value = {this.context}>{this.props.children}
              </CanvasContext.Provider>
          </div>);

  }
}

现在，它包含一个孩子：

class Test extends React.Component{

  render(){
    return <CanvasContext.Consumer>{ctx => {
              ctx.moveTo(0, 0);
              ctx.lineTo(200, 100);
              ctx.stroke();}}
          </CanvasContext.Consumer>;   
  }
}
ReactDOM.render(<Screen><Test/></Screen>, document.getElementsByClassName('container-fluid')[0]);

对此的帮助将不胜感激。

编辑：这是一个 Codepen：https ://codepen.io/ejpg/pen/XqvGdp

4

1 回答 1

5

这是一个好主意，但你有几个问题：

1) 你的 codepen 中的 React 版本是15.4. 您正在使用的新上下文 API 是在16.3. 这就是您的 codepen 抛出错误的原因：

未捕获的 TypeError：React.createContext 不是函数

2）当第一次渲染发生时，ref将不存在，这将导致此函数调用崩溃，因为上下文可能还不存在：

ctx.moveTo(0, 0); // ctx isn't defined yet

ctx.moveTo 不是函数

16.33) 这是使用'createRef功能帮助管理您的 ref的绝佳机会；

class Screen extends React.Component {
  canvas = React.createRef();
  render() {
    return <canvas ref={this.canvas} />
  }
}

4) 无论如何都需要在第一次渲染之后获取上下文，然后你想在你有上下文传递它之后触发重新渲染，所以状态是一个很好的地方：

class Screen extends React.Component {
  state = { context: null };
  canvas = React.createRef();
  componentDidMount() {
    this.setState({ context: this.canvas.current.getContext("2d") });
  }
  render() {
    return (
      <div>
        <canvas ref={this.canvas} />
        {this.state.context && (
          <CanvasContext.Provider value={this.state.context}>
            {this.props.children}
          </CanvasContext.Provider>
        )}
      </div>
    );
  }
}

这足以让您的测试组件在渲染上绘制！

代码沙盒上的完整代码

于 2018-05-27T18:07:03.403 回答