Question

我有我的课程，有一个方法，我想知道是否可以在方法中使用props。

请注意，我尝试在methodTwo中使用道具。这可能吗？如果没有，有没有办法我可以使用props in method？

import React from 'react';
import { Image, Text, View } from 'react-native';

export default class Test extends React.PureComponent {

  methodOne = () => {
    this.setState({
      one:false,
      two:false,
      three:false
    })
  }

  methodTwo = () => {
    this.setState({
      one:false,
      two:false,
//I want to use props
      three:this.props.three
    })
  }

  render() {

    return (
      <View style={{   backgroundColor: 'transparent', alignItems: 'center' }}>
        <Button title='one' onPress={()=>this.methodOne()}/>

// I could call i like this?
        <Test three='newState'/>
      </View>
    );
  }
}

Answer 1

  methodTwo = () => {
    this.setState({
      one:false,
      two:false,
      three:this.props.three
    })
  }

props->是从父组件传输到子组件的值。在基于类的组件中，您可以使用 this.props.Attribute_name 来获取值；在基于功能的组件中，您可以使用 props.Attribute_name 来获取值。任何概念）

如果要使用this.props.three，则在父组件调用（调用此特定组件的组件）<Test three="anyValue" />中使用，然后可以在子组件中轻松获取此值。

class Cat extends React.Component {
  render() {
    const mouse = this.props.mouse;
    return (
      <img src="/cat.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
    );
  }
}

class MouseWithCat extends React.Component {
  constructor(props) {
    super(props);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.state = { x: 0, y: 0 };
  }

  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>

        {/*
          We could just swap out the <p> for a <Cat> here ... but then
          we would need to create a separate <MouseWithSomethingElse>
          component every time we need to use it, so <MouseWithCat>
          isn't really reusable yet.
        */}
        <Cat mouse={this.state} />
      </div>
    );
  }
}

class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>
        <MouseWithCat />
      </div>
    );
  }
}

Answer 2

如果您从道具的父组件传递了道具，则语法this.props.xxxx可以在整个类范围内使用。这样您也可以在methodOne中使用。

Answer 3

您可以在方法内使用道具。您遇到任何特定的错误吗？。

react-native：我可以在方法中使用道具吗？

3 个答案: