如何在兩個不同的.js文件中使用相同的數據（React Native）

Question

在下面的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> ); } } 

Answer 1

您可以創建一個文件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/zh-CN/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處理組件之間的數據的另一種方法。 僅在處理真正復雜的數據共享時才應使用它。

我建議您僅遵循第一個示例，這可能就足夠了

希望能幫助到你