React / CSS - выравнивание изображений, кнопок и текста в столбце - PullRequest
0 голосов
/ 12 января 2020

enter image description here

В настоящее время в моем приложении, когда я нажимаю на кнопку, оно генерирует случайное изображение, но объединяет все, как это происходит. Мне бы хотелось, чтобы на экране появилось изображение разных размеров, в центре которого было бы имя собаки, а затем кнопка под ней.

Код

import * as React from "react";
import { render } from "react-dom";
import axios from "axios";
import "./styles.css";

function App() {

  const [images, setImage] = React.useState("");
  const [text, setText]    = React.useState("");

  function btnClick() {

    axios
        .all([axios.get("https://dog.ceo/api/breeds/image/random"), 
              axios.get("https://dog.ceo/api/breeds/list/all")
         ]) 
        .then(axios.spread((response) => {
              setImage(response.data.message);
              setText(response.data.message.split('/')[4]);
         }))     
        .catch(err => {
            console.log("Error happened during fetching!", err);
        });
  }

  return (
    <div className = "App">
      <img    className = "Img"    src={images} alt="broken"/>
      <button className = "Button" onClick = {btnClick}>Doggie!</button>
      <strong>{text}</strong>
    </div>
  );
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);

CSS

.App {
  font-family: sans-serif;
  text-align: center;
}

.Button {
  display: flex;
}

.Img {
  max-width:100%;
  height:auto;
  max-height:100%;
}

Ответы [ 2 ]

1 голос
/ 12 января 2020

Перестановка элемента должна решить проблему, оберните имя с <p></p>, чтобы отобразить его в новом абзаце.

import React from "react";
import axios from "axios";
import "./styles.css";

export default function App() {
  const [images, setImage] = React.useState("");
  const [text, setText] = React.useState("");

  function btnClick() {
    axios
    .all([
      axios.get("https://dog.ceo/api/breeds/image/random"),
      axios.get("https://dog.ceo/api/breeds/list/all")
    ])
    .then(
      axios.spread(response => {
        setImage(response.data.message);
        setText(response.data.message.split("/")[4]);
      })
    )
    .catch(err => {
      console.log("Error happened during fetching!", err);
    });
 }

 return (
   <div className="App">
    <img src={images} alt="broken" />
    <p><strong>{text}</strong></p>
    <button className="button" onClick={btnClick}>
     Doggie!
    </button>
   </div>
 );
}
0 голосов
/ 12 января 2020

Вы должны переставить свои отрендеренные элементы, чтобы получилось <img/> <strong/> <button />.

Затем в вашем CSS убедитесь, что элементы, которые inline изначально становятся block.

Смотрите фрагмент ниже. Примечание: пропущено Реагируйте, поскольку оно не связано с вашей проблемой, поэтому игнорируйте class использование.


<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.App {
  font-family: sans-serif;
  text-align: center;
}

.App strong {
  display: block;
}

.Button {
  width: 100%;
  text-align: center;
}

.Img {
  max-width:100%;
  height:auto;
  max-height:100%;
  display: block;
}
<div class="App">
  <img class="Img" src="https://i.stack.imgur.com/0WaeI.png" alt="broken"/>
  <strong>{text}</strong>
  <button class="Button" onClick={btnClick}>Doggie!</button>
</div>

Flexbox

Если вы предпочитаете использовать стили флексбокса , ознакомьтесь с этим подробным сообщением об этом .

...