无需参考即可重新访问组件方法

Question

我试图更新我的内部组件而不使用refs。 让我们假设我有3个组件，A包含B，B包含C和D. 当我在A组件中触发方法时，我想要改变C和D的状态。 有没有办法不使用refs？像孩子们将事件绑定到父母那样的事情。

Answer 1

是的，你可以使用下面的渲染道具这样做是一个例子。

你的Parent.js文件看起来像

import Mouse from './Mouse';
class App extends Component {
  render() {
    return (
      <div className="App">
        <Mouse render={({ x, y }) => (
          // The render prop gives us the state we need
          // to render whatever we want here.
          <h1>The mouse position is ({x}, {y})</h1>
        )} />
      </div>
    );
  }
}

你的孩子组件应该是这样的

import React, { Component } from 'react'
import PropTypes from 'prop-types';
export default class Mouse extends Component {
    static propTypes = {
        render: PropTypes.func.isRequired
      }

      state = { x: 0, y: 0 }

      handleMouseMove = (event) => {
        this.setState({
          x: event.clientX,
          y: event.clientY
        })
      }

      render() {
          console.log(this.props.render);
        return (
          <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
            {this.props.render(this.state)}

          </div>
        )
      }
}

Demo

Answer 2

您有四个组件A，B，C，D，并且您希望将方法从A传递给B，然后通过Props将B传递给C和D.无论何时从C或D调用该方法，它都将触发A组件并更改某个状态变量。现在，您想通过触发该方法来更改C和D组件的某些状态变量。所以基本上你想在React中访问子状态。

有一些建议How to access child state in React