javascript - 是否需要 Redux 在左侧显示 ItemList，在右侧显示 ItemContent？

Question

我真的需要 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>

    )
  }
}

这给了我一个错误:

Answer 1

您不需要使用 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>
    )
  }
}

注意:我没有测试过。