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

在下面的js文件中，我们创建了一个整数（ttSelectedItem）。 如何在另一个.js文件上使用它？ （不点击任何按钮） 异步存储解决了这个问题吗？如果这是真的，怎么办

import React，{Component}来自'React'；
从“react native”导入{平台、样式表、文本、视图、图像、图像背景}；
从“react native wheel Picker”导入选择器
var PickerItem=选取器项；
var numberList=[]；
变量ttSelectedItem，
for（设i=0；i<41；i++）{
numberList.push（i.toString（））；
}
导出默认类yks扩展组件{
建造师（道具）{
超级（道具）；
此.state={
ttSelectedItem:20，
项目列表：numberList，
};
}
onPickerSelect（索引，selectedItem）{
这是我的国家({
[selectedItem]：索引，
})
}
渲染（）{
返回(
this.onPickerSelect（索引'ttSelectedItem'）}>
{this.state.itemList.map（（值，i）=>(
))}
);
}
}

您可以创建一个文件

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
}

// 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

//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);

更多信息：

也可以将道具从父零部件传递到其子零部件

例如：

//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
}

// 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

//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);

//App.js
从“第一个组件的路径”导入第一个组件；
从“到第二个组件的路径”导入第二个组件；
类应用程序扩展了React.Component{
render（）{
返回(
)
}
}
//FirstComponent.js
类FirstComponent扩展了React.Component{
console.log（this.props.ttSelectedItem）//打印Hello
}
导出默认组件
//SecondComponent.js
const SecondComponent=（道具）=>{
console.log（props.ttSelectedItem）//打印Hello
}
导出默认的第二个组件

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

例如：

//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
}

// 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

//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);

//ttSelectedItem.js
const ttSelectedItem=（组件）=>{
返回
}
导出默认ttSelectedItem；
//YourComponent.js
从“ttSelectedItem路径”导入ttSelectedItem；
类YourComponent扩展组件{
(...)
console.log（this.props.ttSelectedItem）；//打印Hello
(...)
}
导出默认ttSelectedItem（您的组件）；

更多详情：

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

使用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;
};

//App.js
从“redux thunk”导入redux thunk；
从'react redux'导入{Provider}；
从“redux”导入{createStore，applyMiddleware}；
从“到减速器的路径”导入减速器；
从“组件路径”导入组件；
类应用程序扩展组件{
render（）{
conststore=createStore（reducer，{}，applyMiddleware（ReduxThunk））；
返回(
);
}
}
//YourComponent.js
从'react redux'导入{connect}；
类YourComponent扩展React.Component{
console.log（this.props.ttSelectedItem）//打印Hello
}
const mapStateToProps=函数（状态）{
返回{
ttSelectedItem:state.ttSelectedItem，
}
}
导出默认连接（mapStateToProps，{}）（MainAppContainer）
//Reducer.js
常量初始状态={
ttSelectedItem:'你好'，
};
导出默认值（状态=初始状态）=>{
返回状态；
};

更多信息：

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

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

希望能有帮助