时间戳

首页 > 解决方案 > 如何在两个不同的 .js 文件中使用相同的数据（React Native）

javascript - 如何在两个不同的 .js 文件中使用相同的数据（React Native）

问题描述

在下面的 js 文件中，我们创建一个整数（ttSelectedItem）。你如何在另一个 .js 文件上使用它？（无需单击任何按钮）AsyncStorage 是否解决了这个问题？如果是真的，怎么办？

import React, { Component } from 'react';
import {Platform,StyleSheet,Text,View,Image,ImageBackground} from 'react-native';
import Picker from 'react-native-wheel-picker'
var PickerItem = Picker.Item;
var numberList = [];
var ttSelectedItem,
for (let i = 0; i < 41; i++){
    numberList.push(i.toString());
  }

export default class yks extends Component<{}> {
  constructor(props) {
  super(props);
  
  this.state = {
    ttSelectedItem : 20,
    itemList: numberList,
    
  };
}
    onPickerSelect (index, selectedItem) {
        this.setState({
            [selectedItem] : index,
        })
    }

    render () {
        return (
         <View>     
 
                <Picker style={{width: "100%", height: "100%"}}
                    selectedValue={this.state.ttSelectedItem}
                    onValueChange={(index) => this.onPickerSelect(index, 'ttSelectedItem')}>  
                        {this.state.itemList.map((value, i) => (
                            <PickerItem label={value} value={i} key={"money"+value}/>
                        ))}
                </Picker>

                </View>


        );
    }
}

标签： javascriptandroidiosreact-native

解决方案

您可以创建一个文件ttSelectedItem.js并将其导入您需要的所有组件中。

例子：

//ttSelectedItem.js
const ttSelectedItem = 'Hello';

export default ttSelectedItem

//YourComponent.js
import ttSelectedItem from './path-to-ttSelectedItem';

class YourComponent extends React.Component {
  console.log(ttSelectedItem); // print Hello
}

更多信息：https ://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

您还可以将 prop 从父组件传递给它的子组件。

例子：

// App.js
import FirstComponent from 'path-to-first-component';
import SecondComponent from 'path-to-second-component';

class App extends React.Component {
  render() {
    return (
      <View>
        <FirstComponent ttSelectedItem={'Hello'} />
        <SecondComponent ttSelectedItem={'Hello'} />
      </View>
    )
  }
}

// FirstComponent.js
class FirstComponent extends React.Component {
  console.log(this.props.ttSelectedItem) //print Hello
}

export default FirstComponent

// SecondComponent.js
const SecondComponent = (props) => {
  console.log(props.ttSelectedItem) //print Hello
}

export default SecondComponent

根据您的代码的复杂程度，您可以使用 HOC 连接一些数据并传递您的组件

例子：

//ttSelectedItem.js
const ttSelectedItem = (Component) => {
  return <Component ttSelectedItem={'Hello'} />
}

export default ttSelectedItem;

//YourComponent.js
import ttSelectedItem from 'path-to-ttSelectedItem';

class YourComponent extends Component{
(...)
console.log(this.props.ttSelectedItem); //print Hello
(...)
}

export default ttSelectedItem(YourComponent);

更多细节：https ://reactjs.org/docs/higher-order-components.html

或者如果你需要更复杂的代码，你可以使用 Redux Store 来保存这些数据

使用 Redux 和 ReduxThunk 的示例：

//App.js
import ReduxThunk from 'redux-thunk';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reducer from 'path-to-your-reducer';
import YourComponent from 'path-to-your-component';

class App extends Component {

  render() {
    const store = createStore(reducer, {}, applyMiddleware(ReduxThunk));
    return (
      <Provider store={store}>
        <YourComponent />
      </Provider>
    );
  }
}


// YourComponent.js
import { connect } from 'react-redux';

class YourComponent extends React.Component {
  console.log(this.props.ttSelectedItem) // prints Hello
}

const mapStateToProps = function(state){
  return {
    ttSelectedItem: state.ttSelectedItem,
  }
}
export default connect(mapStateToProps, {})(MainAppContainer)

// Reducer.js
const INITIAL_STATE = {
    ttSelectedItem: 'Hello',
};
export default (state = INITIAL_STATE) => {
    return state;
};

更多信息：https ://redux.js.org/basics/store

最后一个例子只是为了展示另一种使用 Redux 处理组件之间数据的方法。只有在处理非常复杂的数据共享时才应该使用它。

我建议你只按照第一个例子，这可能就足够了

希望能帮助到你

推荐阅读