Question

我正在使用本机反应，我想将功能和一些数据从 Component 类传递到另一个 Stateless 类，但是我无法传递函数和数据部分。

在这里您可以看到我的Component类：

class Classroom extends Component {

    constructor(props, context) {
        super(props, context);



    };

    state = {
        isLightOn: false,
        title : "Turn light on "
    }

   onPress() {
       this.setState({isLightOn: !this.state.isLightOn})
       console.log(this.state.isLightOn)
       this.setState({title:this.state.isLightOn===false ?"Turn light off":"Turn light on"})

   }

    render() {
        return (
            <View style={styles.blue}>

                <LightBulb  isLightOn={this.state.isLightOn}> </LightBulb>
                <LightButton onPress={this.onPress} isLightOn={this.state.isLightOn} title={this.state.title} > </LightButton>


            </View>
        );
    }


}

首先，我想将 isLightOn 和 title 数据传递给我的 LightButton 类（这意味着我的无状态类）。在那之后，我想在我的Stateless类中使用onPress函数，但是我不能使用。我遇到了这个错误：

已超过最大更新深度。当组件重复调用componentWillUpdate或componentDidUpdate内部的setState时，可能会发生这种情况。 React限制了嵌套更新的数量，以防止无限循环。

我还在LightButton onPress = {this.onPress}上删除了括号，但仍然出现错误。

这是我的无状态课程

const LightButton = ({onPress,isLightOn,title}) => (


        <View style={styles.red}>


            <Button
                title= {title}
                onPress={() => {}

                }
            />
        </View>
)

我想在此类内部使用onPress函数和数据。结果，如何将函数和数据传递给该类？

Answer 1

这里的主要问题是，您需要使用箭头函数声明onPress或将其绑定到构造函数中组件的this值。否则，它将无法访问正确的此值。除此之外，将道具传递到组件中的方式非常好。

为了方便起见，我还将onPress中的两个设置状态调用合并为一个。

在LightButton中，我将其设置为将onPress函数向下传递给按钮：

const LightButton = ({ onPress, isLightOn, title }) => (
  <div style={{backgroundColor:'red'}}>
    <Button title={title} onPress={onPress} />
  </div>
);

（我使用react进行设置，但是当前的问题更多是JS问题，而不是React / ReactNative问题，因此建议仍然有效:)）

const { Component } = React;
const View = 'div';
const Button = (({title,onPress})=><button onClick={onPress}>{title}</button>);

const LightBulb = ({ isLightOn }) => {
  return <div className={'LightBulb' + (isLightOn ? ' on' : '')} />;
};

const LightButton = ({ onPress, isLightOn, title }) => (
  <div style={{backgroundColor:'red'}}>
    <Button title={title} onPress={onPress} />
  </div>
);
class Classroom extends Component {
  state = {
    isLightOn: false,
    title: 'Turn light on ',
  };

  onPress=()=> {
    console.log(this.state.isLightOn);
    this.setState({
      title:
        this.state.isLightOn === false ? 'Turn light off' : 'Turn light on',
        isLightOn: !this.state.isLightOn
    });
  }

  render() {
    return (
      <div style={{backgroundColor:'blue'}}>
        <LightBulb isLightOn={this.state.isLightOn}> </LightBulb>
        <LightButton
          onPress={this.onPress}
          isLightOn={this.state.isLightOn}
          title={this.state.title}
        >Button</LightButton>
      </div>
    );
  }
}

ReactDOM.render(<Classroom />, document.querySelector('#root'));

.LightBulb {
  height: 50px;
  width: 50px;
  border-radius: 50px;
  background-color: black;
}
.LightBulb.on {
  background-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"/>

Answer 2

您可以像分配

const LightButton = ({onPress,isLightOn,title}) => (
  ...
  onPress={onPress}
  ...

或如果需要在内部传递arg，则使用箭头功能

onPress={()=>onPress(someArg)}

请注意，您根本没有放置()，或者两次放置() => func()是因为在函数刚加载而未单击时就不运行该函数。

与您的问题没有直接关系，但是您遇到的问题是通过这样的操作在onPress内部

 this.setState({isLightOn: !this.state.isLightOn})
 console.log(this.state.isLightOn)
 this.setState({title:this.state.isLightOn===false ?"Turn light off":"Turn light on"})

setState是一个异步调用，因此第二setState用法不能保证按您的期望引用状态，请setState({ ... }, () => callback())或全部使用一行，并符合上一状态< / p>

 this.setState({isLightOn: !this.state.isLightOn, title: !this.state.isLightOn===false ?"Turn light off":"Turn light on"})

Answer 3

您做错的第一件事是您的状态实例化！您需要在constructor块中实例化状态，例如：

constructor(props, context) {
  super(props, context);
  this.state = { counter: 0 };
}

onPress()将此用于您的功能，这是React native或任何其他语言不推荐的功能，它们是React Native的专用功能和方法
对于传递参数或调用函数，最好使用这些模式====>

onPress={() => urFunction()}（带有括号或

）

onPress={urFunction}（不带括号

）

进行修改，希望对您有所帮助<3

如何在React Native中将函数和数据从组件类传递到无状态类？

3 个答案: