Question

在以下React Native场景中，如何将变量readlink -f img.png从“父”组件传递到“子”组件？

我有一个像这样的“父”组件：

userId

还有一个像这样的“子”组件：

export class UserProfileScreen extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            userId: 123,
        }
    }

    render() {
        return(
            <View>
                <UserIntro />
            </View>
        )
    }
}

Answer 1

export class UserProfileScreen extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            userId: 123,
        }
    }

    render() {
        return(
            <View>
                <UserIntro id={this.state.userId} />
            </View>
        )
    }
}


export class UserIntro extends React.Component {

    render() {
        return(
            <View>
                <Text>Introduction for user {this.props.id}</Text>
            </View>
        )
    }
}

Answer 2

您可以使用道具从父级到子级传递任何内容（JSON对象，JSON数组，简单数组，浮点数甚至函数等）。道具数量没有限制。

您也可以使用道具从子级执行父级功能

export class UserProfileScreen extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      userId: 123
    };
  }

  getUpdatedUserID = updatedId => {
    this.setState({userId:updatedId});
    alert(updatedId);
  };

  render() {
    return (
      <View>
        <UserIntro id={this.state.userId} getUpdatedUserID={this.getUpdatedUserID} />
      </View>
    );
  }
}

export class UserIntro extends React.Component {


  updateUserId=()=>
  {
    this.props.getUpdatedUserID((int)(this.props.id)+1);
  }

  render() {
    return (
      <View>
        <Text>Introduction for user {this.props.id}</Text>
        <Button onPress={this.updateUserId}  />

      </View>
    );
  }
}

将状态传递给子组件

2 个答案: