在同一级别的类/组件之间传递数据,而不使用React Native中的导航,可以通过以下几种方式实现:
// 父组件
import React, { Component } from 'react';
import ChildComponent from './ChildComponent';
class ParentComponent extends Component {
constructor(props) {
super(props);
this.state = {
data: 'Hello World'
};
}
render() {
return (
<ChildComponent data={this.state.data} />
);
}
}
// 子组件
import React from 'react';
const ChildComponent = (props) => {
return (
<div>{props.data}</div>
);
}
export default ChildComponent;
// 创建Context
const MyContext = React.createContext();
// 父组件
import React, { Component } from 'react';
import ChildComponent from './ChildComponent';
class ParentComponent extends Component {
constructor(props) {
super(props);
this.state = {
data: 'Hello World'
};
}
render() {
return (
<MyContext.Provider value={this.state.data}>
<ChildComponent />
</MyContext.Provider>
);
}
}
// 子组件
import React from 'react';
const ChildComponent = () => {
return (
<MyContext.Consumer>
{data => <div>{data}</div>}
</MyContext.Consumer>
);
}
export default ChildComponent;
// 安装Redux和React-Redux
npm install redux react-redux
// 创建Redux Store
// store.js
import { createStore } from 'redux';
const initialState = {
data: 'Hello World'
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'UPDATE_DATA':
return {
...state,
data: action.payload
};
default:
return state;
}
};
const store = createStore(reducer);
export default store;
// 父组件
import React from 'react';
import { connect } from 'react-redux';
const ParentComponent = (props) => {
const updateData = () => {
props.updateData('New Data');
};
return (
<div>
<div>{props.data}</div>
<button onClick={updateData}>Update Data</button>
</div>
);
}
const mapStateToProps = (state) => {
return {
data: state.data
};
};
const mapDispatchToProps = (dispatch) => {
return {
updateData: (data) => dispatch({ type: 'UPDATE_DATA', payload: data })
};
};
export default connect(mapStateToProps, mapDispatchToProps)(ParentComponent);
// 子组件
import React from 'react';
import { connect } from 'react-redux';
const ChildComponent = (props) => {
return (
<div>{props.data}</div>
);
}
const mapStateToProps = (state) => {
return {
data: state.data
};
};
export default connect(mapStateToProps)(ChildComponent);
这些方法可以在同一级别的类/组件之间实现数据传递,根据具体的场景和需求选择合适的方式。
领取专属 10元无门槛券
手把手带您无忧上云