Как обновить компонент карты при нажатии на изображение? - PullRequest
0 голосов
/ 24 февраля 2019

Я учусь использовать React JS и Ant Design, но в настоящее время нахожусь в тупике.

Я хочу создать простую страницу реакции без сохранения состояния, где отображаются изображения персонажей из Диснея.При нажатии на изображения компонент карты обновляется информацией о персонаже (например, пол, рост, виды и т. Д.).Если я нажму на изображение другого персонажа, его информация будет обновлена ​​до того же компонента Карты.Я не могу найти хороший источник с инструкциями о том, как обновить компонент карты.

Если есть лучший метод для выполнения той же задачи, когда щелчок по изображению может обновить простое поле, содержащее информацию о персонаже, тогда я был бы рад изучить альтернативный метод.

Любойпонимание, которое каждый может предоставить, будет с благодарностью.Спасибо.

1 Ответ

0 голосов
/ 25 февраля 2019

Самое простое решение - создать простой массив объектов, содержащий информацию, которую вы хотите визуализировать.Получив это, мы можем просто сопоставить это с новым массивом компонентов Princess Card, который просто содержит логику, чтобы показать / скрыть дополнительную информацию.

Полный пример работы см. В примере codesandbox.

princesses: [
      {
        name: "Rapunzel",
        image:
          "https://lumiere-a.akamaihd.net/v1/images/character_princess_rapunzel_314b7a09.jpeg?region=0%2C0%2C450%2C450&optimize=true",
        height: "5' 1",
        weight: 95,
        age: "18"
      },
      {
        name: "Anna",
        image:
          "data:image/jpeg;base64,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",
        height: "5' 0",
        weight: 92,
        age: "18"
      },
      {
        name: "Merida",
        image:
          "https://lumiere-a.akamaihd.net/v1/images/character_princess_merida_eb06acab.jpeg?region=0,0,450,450",
        height: "5' 4",
        weight: 104,
        age: "16"
      }
]
class PrincessCard extends React.Component {
  state = {
    open: false
  };
  toggleOpen = () => this.setState(prevState => ({ open: !prevState.open }));
  render() {
    return (
      <Col xs={8}>
        <Card
          hoverable={true}
          cover={<img alt={this.props.name} src={this.props.data.image} />}
          actions={[
            <Button block={true} onClick={this.toggleOpen}>
              {this.state.open ? "Show less info" : "Show more info"}
            </Button>
          ]}
        >
          {this.props.data.name}
          {this.state.open && (
            <React.Fragment>
              <Divider />
              <List
                bordered
                dataSource={[
                  `Age: ${this.props.data.age}`,
                  `Height: ${this.props.data.height}`,
                  `Weight: ${this.props.data.weight}`
                ]}
                renderItem={item => <List.Item>{item}</List.Item>}
              />
            </React.Fragment>
          )}
        </Card>
      </Col>
    );
  }
}

https://codesandbox.io/s/5kpmrrwxo4

...