小编kle*_*uis的帖子

所需的显示是使左列中的文本垂直居中（中间）。我没能做到这一点。这是因为右栏中的图片比 2 段文字高。有趣的是，橙色的 div 只和段落一样高。

内联样式仅用于调试。正在使用的设计是响应式的，所以我假设以 px 为单位设置高度将使其无响应。

编辑：内联调试样式具有误导性，因此已被删除

<div class="row">
  <div class="col-md-8">
    <div class="vertical-align-center">
      <p>First small paragraph with other elements in it</p>
      <p>Second small paragraph with other elements in it</p>
    </div>
  </div>

  <div class="col-md-4">
    <img class="img-responsive img-md-size" src="blog.localhost/klequis/wp-content/uploads/2016/0521/DevBoxRunning.png">
  </div>
</div>

我正在使用 React-JSS，但不理解如何使用“@global”创建全局样式。该文档没有指出（据我所知）全局样式如何馈送/挂钩到 React 应用程序中。我创建了一个示例应用程序，尝试将全局样式提供给顶级组件的“style”属性，但这不起作用。

代码沙盒示例

这是App.js

import React from "react";

const styles = {
  "@global": {
    body: {
      color: "green"
    },
    a: {
      textDecoration: "underline"
    }
  }
};

export default function App() {
  return (
    <div style={styles} className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

我有一个反应应用程序，但很难深入了解状态。

import React, { Component } from 'react';
import { Grid} from 'react-bootstrap'
import fetch from 'isomorphic-fetch';


class Pokemon extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pokemon: {},
    }
  }

  componentDidMount() {

    fetch('https://pokeapi.co/api/v2/pokemon/150/')
      .then((response) => {
        return response.json()
      })
      .then((json) => {
        this.setState({
          pokemon: json,
         })
      })
  }

  render () {
    const { pokemon } = this.state
    console.log(pokemon.species) // works
    return (
      <Grid>
        <p>{pokemon.species.name}</p>
        <Image src={this.props.image} responsive alt='member picture' />
     </Grid>
    )
  }

}

export default Pokemon;

使用 …