如何通過React Native中的函數訪問組件的引用？

Question

我已經將一個自定義component導入到screen ，並在render()函數中對其進行了render() 。 然后，創建對該自定義組件的ref 。 現在， render()函數看起來像這樣。

render() {
  return (
    <View>
      <MyComponent ref={component => this.myComponent1 = component} />
      <MyComponent ref={component => this.myComponent2 = component} />
      <MyComponent ref={component => this.myComponent3 = component} />
    </View>
  )
}

然后，在同一個screen文件中，我創建了另一個函數來訪問自定義組件的狀態。 我是這樣寫的。

myFunction = (ref) => {
  ref.setState({ myState: myValue })
}

然后，我想像這樣分別為那些單獨的組件調用該函數。 （在screen文件中）

this.myFunction(this.myComponent1)
this.myFunction(this.myComponent2)
this.myFunction(this.myComponent3)

但是，它不起作用。 它給了我以下錯誤。

null is not an object (evaluating 'ref.setState')

實際上，我需要執行myFunction是

this.myComponent1.setState({ myState: myValue })
this.myComponent2.setState({ myState: myValue })
this.myComponent3.setState({ myState: myValue })

當我想通過screen文件中的myFunction()訪問它時， component的狀態為myState 。

您能幫我解決這個問題嗎？

Answer 1

這不是從父組件設置子組件的setState的好習慣。 我假設您想通過嘗試這種方法為子組件的狀態設置一些值。

您可以將這些值保留在本地狀態，然后將其傳遞給道具，子組件將在那里重新渲染/獲取更新的值。

class Component {
  constructor() {
    this.state = {
      myValues: {
        component1: "abc",
        component2: "xyz",
        component3: "123",
      }
    }
  }

  myFunction(componentName, newValue) {
    this.setState({
      myValues: {
        ...this.state.myValues,
        [componentName]: newValue
      }
    })
  }

  render() {
    return (
      <View>
        <MyComponent value={this.state.myValues.component1} />
        <MyComponent value={this.state.myValues.component2} />
        <MyComponent value={this.state.myValues.component3} />
      </View>
    )
  }
};

Answer 2

首先確保MyComponent是一個組件，而不是一個無狀態組件，然后要更改狀態，請嘗試以下操作：

myFunction = (ref) => {
  ref.current.setState({ myState: myValue }
}

當然，要使其正常工作，您的組件必須已經掛載，如果嘗試例如在構造函數中調用它，則它將無法工作

Answer 3

在組件內部，在componentDidMount函數中，請添加

componentDidMount() {
    this.props.refs(this) 
}

setState(key, value){
    this.setState({[key]:value})
}

並將ref參數更改為refs

<MyComponent refs={component => this.myComponent1 = component} />

myFunction = (ref) => {
    ref.setState('myState', 'myValue')
}