我真的需要 Redux 来管理应用程序状态来实现这一点吗?如果不是 - 我如何管理/实现我的路线和状态 <ItemList />
和 <ItemContent >/
成分?
- 我应该创建
<ItemsListAndContent />
吗?组件和嵌套其他 组件在? - 也许 HOC 就是这种情况?
什么是最好的 方法?
当前案例及代码:
我的应用程序状态是从 <App />
传递的至 <ExpenseList />
class ExpenseList extends Component {
const details = passExpenseProps(expense){
return (
<div>
<ExpenseDetails expenseProps={expense} />
</div>
)
}
render () {
const {expenses} = this.props;
const list = expenses.expenseList.map(expense =>
<Segment clearing key={expense.uid} >
<a href="" onClick={() => {this.passExpenseProps(expense)}}>
{expense.createdAt}
</a>
<Button floated='right'>
Preview / Print
</Button>
</Segment>
)
return (
<div>
<Grid celled='internally'>
<Grid.Row>
<Grid.Column width={5}>
<div>
<h1>Your Expense List:</h1>
<Button onClick={this.props.loadSamples}>Load Sample Expenses</Button>
<Segment.Group raised>
{list}
</Segment.Group>
</div>
</Grid.Column>
<Grid.Column width={11}>
<Segment>
{details}
</Segment>
</Grid.Column>
</Grid.Row>
</Grid>
</div>
)
}
}
最佳答案
您不需要使用 redux
如果您的应用程序简单且小巧。您可以使用组件状态来做到这一点。您应该始终从小处着手,只有当您的应用增长到足够大时才使用 redux。
现在与您的问题相关,您可以将主要状态保留在 <ItemList />
中组件并将所需数据传递给 <ItemContent />
基于从列表中单击哪个项目的组件。示例
class ItemList extends Component {
constructor(props) {
super(props);
this.state = {
...
// you can keep your data here like
// headings and data for the item content
}
}
.
.
.
// your methods
.
.
.
render() {
const itemList = //map your list here and
// provide a click event which will
// render the respective <ItemContent />
// may be using an id or some index of the array
// depends how you want your data structure to be.
return(
{itemList}
// based on which item from the list is clicked
// you can pass different heading and state
<ItemContent heading={...} data={...} />
);
}
}
编辑您的代码中的更改。
class ExpenseList extends Component {
constructor(props) {
super(props);
this.state = {
currentItemId = this.props.expenses[0].uid
}
}
handleItemClick = (e) => {
const uid = e.target.id;
this.setState({ currentItemId: uid });
}
details = () => {
const { expenseList } = this.props.expenses;
const [ expense ] = expenseList.filter(expense => {
return expense.uid === this.state.currentItemId;
});
return (
<div>
<ExpenseDetails expenseProps={expense} />
</div>
)
}
render () {
const { expenseList } = this.props.expenses;
const list = expenseList.map(expense =>
<Segment clearing key={expense.uid} >
<a href="#" id={expense.uid} onClick={this.handleItemClick}>
{expense.createdAt}
</a>
<Button floated='right'>
Preview / Print
</Button>
</Segment>
)
return (
<Grid celled='internally'>
<Grid.Row>
<Grid.Column width={5}>
<div>
<h1>Your Expense List:</h1>
<Button onClick={this.props.loadSamples}>Load Sample Expenses</Button>
<Segment.Group raised>
{list}
</Segment.Group>
</div>
</Grid.Column>
<Grid.Column width={11}>
<Segment>
{details()}
</Segment>
</Grid.Column>
</Grid.Row>
</Grid>
)
}
}
注意:我没有测试过。
关于javascript - 是否需要 Redux 在左侧显示 ItemList,在右侧显示 ItemContent?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46821789/