Реагировать на родную ссылку на визуализированный класс - PullRequest
Новая
       103

Реагировать на родную ссылку на визуализированный класс

0 голосов
/ 19 октября 2018

Я пытаюсь создать простое приложение: нажмите кнопку и добавьте элемент в список.

вот одна попытка: 

export default class App extends Component<Props> {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  } 

  onPressButton = () => {
    this.myRef.setState({data: [this.myRef.state.data, {key: 'test'} ]});
  }


  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <MsgList  ref={(comp) => {this.myRef = comp;}}/>
        <TouchableOpacity onPress={this.onPressButton}>
          <Text>press</Text>
        </TouchableOpacity> 
      </View>
    );
  }
}

MsgList 

class MsgList extends Component {

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={[
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
        />
      </View>
    );
  }
}

this.Ref - большая круговая структура, но не узел, поэтому ref error

Я пробовал ReactDOM.findDOMNode, но получаю ошибку при импорте ReactDOM из 'response-dom' ошибка импорта

Я пробовал МНОГИЕ итерации.Мое лучшее предположение, что есть лучший способ визуализации MsgList.

Ответы [ 2 ]

0 голосов
/ 19 октября 2018

на основе ввода I поднял состояние 

export default class App extends Component<Props> {
    constructor(props) {
        super(props);

         this.state = {
            data: [{key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},]
         }
    }


    onPressButton = () => {
        this.setState({data: this.state.data.concat( {key: 'test'} )});
    }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <MsgList data={this.state.data}  />
            <TouchableOpacity onPress={this.onPressButton}>
                <Text>press</Text>
            </TouchableOpacity> 
      </View>
    );
  }
}

 class MsgList extends Component {

  render() {
    return (
      <View style={styles.container}>
        <FlatList
            data={this.props.data}
            renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
        />
      </View>
    );
  }
}
0 голосов
/ 19 октября 2018

Рекомендовать решение

Использовать state в родительском компоненте для обработки дочернего элемента props без ref.

App.js 

export default class App extends Component<Props> {
  constructor(props) {
    super(props);
  } 

  onPressButton = () => {
    this.setState((prevState, props) => ({ // Use setState for changing 
      data: prevState.data.concat({key: 'test'}),
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <MsgList  data={this.state.data} />
        <TouchableOpacity onPress={this.onPressButton}>
          <Text>press</Text>
        </TouchableOpacity> 
      </View>
    );
  }
}

Другое решение

setNativeProps может быть так, как вы хотите.

App.js 

onPressButton = () => {
  this.myRef.setNativeProps({ // Change ref's props directly
    data: {key: 'test'}
  });
},

MsgList class 

class MsgList extends Component {
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.props.data} // Get data from props. 
          renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
        />
      </View>
    );
  }
}

Но это может быть узким местом производительности.

Используйте setNativeProps, когда частый повторный рендеринг создает узкое место в производительности

Прямые манипуляции не будут инструментом, к которому вы часто обращаетесь;как правило, вы будете использовать его только для создания непрерывных анимаций, чтобы избежать затрат на рендеринг иерархии компонентов и согласование многих видов.setNativeProps является обязательным условием и сохраняет состояние на собственном уровне (DOM, UIView и т. д.), а не в ваших компонентах React, что делает ваш код более трудным для рассуждения.Прежде чем использовать его, попробуйте решить вашу проблему с помощью setState и shouldComponentUpdate.

Официальный

Почему?

state следуетбыть управляемым компонентом себя.Вот почему this.ref.state - ноль, который вы пробовали ранее.Таким образом, вы можете передать реквизиты потомку от родителя через setState, если значение является динамическим.И state Обновления могут быть асинхронными.Вот почему я использую prevState в setState. Doc

...