时间戳

首页 > 解决方案 > 如何在 React Native 中将函数和数据从组件类传递到无状态类？

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

问题描述

我正在使用本机反应，我想将函数和一些数据从组件类传递到另一个无状态类，但我无法传递函数和数据部分。

在这里你可以看到我的 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和标题数据传递给我的LightButton类（这意味着我的无状态类）。之后，我想在我的 Stateless 类中使用 onPress 函数，但我不能使用。我正在接受这个错误：

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

我也 Li​​ghtButton onPress={this.onPress} 删除括号，但仍然出错。

这是我的无国籍课程

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


        <View style={styles.red}>


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

                }
            />
        </View>
)

我想在这个类中使用 onPress 函数和数据。结果，如何将函数和数据传递给该类？

标签： javascriptreactjsreact-nativereact-redux

解决方案

这里的主要问题是您需要onPress使用箭头函数声明或将其绑定到this构造函数中的组件值。否则它将无法访问正确的 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"/>

推荐阅读