Question

使用我不了解的react-native，我必须如何填充对嵌套结构的更改。

我创建了一个简单的示例。父母拥有一个按钮。按下后，父级中的点击计数将增加。我如何实现孩子的点击次数也会增加？（在我的现实世界场景中，我希望重新渲染特定的孩子。因此，我知道我必须更改某些状态）

父母

var React = require('react');
import { StyleSheet, Text, View, Button } from 'react-native';
import Child from './Child';

class Parent extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
        clickcount: this.props.clickcount,
      }

      child = (<Child clickcount={this.state.clickcount}/>);
  }

  handlePress() {
      console.log('Parent handlePress');
      this.increment();
  }

  increment() {
      this.setState({clickcount: this.state.clickcount+1});
  }



  render() {
    return (
      <View>
        <Text>Parent {this.state.clickcount}</Text>
      
        <Button
                    title="OK"
                    onPress={() => this.handlePress()}
                />
     </View>
    );
  }
}

export default Parent;

孩子

var React = require('react');
import { StyleSheet, Text, View, Button } from 'react-native';

class Child extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
        clickcount: this.props.clickcount,
      }
  }

  handlePress() {
      console.log('Child handlePress');
      this.increment();
  }

  increment() {
      this.setState({clickcount: this.state.clickcount+1});
  }

  render() {
    return (
      <View>
        <Text>Child {this.state.clickcount}</Text>

     </View>
    );
  }
}

export default Child;

当前，单击3次后，输出如下：

父母3 儿童0

Answer 1

您可以将增量功能传递给孩子，以便父母拥有点击次数

class Child extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.increment}/>
        {this.props.clickCount}
      </div>
    )
  }
}


class Parent extends React.Component {
  state = {
    clickCount: 0
  }
  
  increment = () => {
    this.setState({ clickCount: this.state.clickCount + 1 })
  }
  
  render () {
    return (
      <Child increment={() => this.increment()} clickCount={this.state.clickCount}/>
    )
  }
}

将更改传播到子组件的正确方法是什么？

1 个答案: