Как получить доступ к ref компонента через функцию в React Native?

Question

Я импортировал пользовательский component в свой screen и отобразил его в функции 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 })

Состояние myState находится в component, а я хочу получить к нему доступ через myFunction() в моем файле screen.

Не могли бы вы помочь мне решить эту проблему?

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

Внутри вашего компонента в функции 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')
}

Answer 3

Сначала убедитесь, что MyComponent является компонентом, а не Компонентом без состояния, затем, чтобы изменить состояния, попробуйте следующее:

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

и, конечно, чтобы он работал, ваш компонент должен быть ужеmounts, если вы попытаетесь, например, вызвать это в конструкторе, он не будет работать