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/en-US/docs/web/javascript/reference/statements/export

您还可以将道具从父组件传递给其子组件。

示例：

// 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处理组件之间数据的另一种方法。它只应在处理非常复杂的数据共享时使用。

我建议您只关注第一个例子，这可能就够了

希望有所帮助

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

1 个答案: