小编Ego*_*rov的帖子

我正在尝试在我的应用程序中使用 Roboto 字体并且遇到了困难..

我做了npm install --save typeface-roboto并添加import 'typeface-roboto'到我的 React 组件中。但仍然无法让我的字体改变。

我正在尝试这样做：

const React = require('react')
import 'typeface-roboto'

class Example extends React.Component {

  render() {

    let styles = {
      root: {
        fontFamily: 'Roboto'
      }
    }

    return (
      <div style={styles.root}>
        <p>
          This text is still not Roboto ?!???!!1
        </p>
      </div>
    )
  }
}
module.exports = Example

我错过了什么吗？寻找一种简单的方法来做到这一点，而无需任何外部 css 文件..

我正在尝试创建一个动画，用于使用 React 将子元素从一个父元素移动到另一个父元素。

用户应该能够点击一个元素并看到它移动到另一个 div 中。

我制作了一个简单的演示组件（没有动画）来展示我的意思。单击元素时，状态会更新，元素会在正确的位置重新呈现。

class App extends React.Component {

  state = {
    list: ['Alice', 'Bob', 'Charlie', 'David', 'Emily', 'Frank'],
    top: [0, 1, 2],
    bottom: [3, 4, 5]
  }

  moveDown = (item) => {
    let { top, bottom } = this.state
    this.setState({
      top: top.filter(x => x !== item),
      bottom: [...bottom, item]
    })
  }

  moveUp = (item) => {
    let { top, bottom } = this.state
    this.setState({
      top: [...top, item],
      bottom: bottom.filter(x => x !== item)
    })
  }

  render() …

我正在尝试做的事情可能看起来有点不正统，所以请耐心等待。

我想使用 React Portal 将子组件渲染到父组件的 DOM 节点中。

您可能会想：“这不是 Portal 的目的，您应该让孩子随心所欲。”

你可能是对的，但这是我尝试了许多其他方法后尝试的实验方法的简化示例。

无论如何，这是代码：（这里是沙箱）

const Child = ({ color }) => {
  let jsx = <h1>Wow! I am {color}!</h1>;
  let node = document.getElementById(color);
  return ReactDOM.createPortal(jsx, node);
};

class Parent extends React.Component {
  state = {
    color: "green"
  };
  changeColor = () => {
    let color = this.state.color === "green" ? "blue" : "green";
    this.setState({ color });
  };
  render() {
    return (
      <div className="App">
        <Child color={this.state.color} />
        <button onClick={this.changeColor}>change color</button>
        <div className="green" …

我正在尝试制作一个包含 3 个项目的水平 flexbox div。每个都有一个最小宽度，我想隐藏它们，因为屏幕太小而无法容纳它们。如果我知道所有 3 个 div 的宽度，我只会使用媒体查询在正确的断点处隐藏 div。问题是 div1 是具有动态宽度的图像（在示例中以随机宽度重新创建）

如果元素不适合 flexbox 容器，有没有办法隐藏它？

这有点难以解释，但希望多次运行此代码片段将显示我所追求的内容：

let width = (Math.random()*600)
document.getElementById('one').style.minWidth = width + 'px'

.root {
  display: flex;
  justify-content: space-between;
}

.one {
  background-color: red;
}

.two {
  min-width: 200px;
  background-color: green;
}

.three {
  min-width: 300px;
  background-color: yellow;
  flex: 1
}

<div class="root">
  <div id="one" class="one">
    unknown width
  </div>
  <div class="two">
    hide me if im off the screen
  </div>
  <div class="three">
    hide me if im off the screen …

我在我的应用程序中使用MaterialUI Card和CardMedia组件，但无法弄清楚如何在图像上方叠加文本。这是我正在尝试的简化示例：

<Card>
   <CardMedia image={this.props.preview} style={styles.media}/>
   <div style={styles.overlay}>
      this text should overlay the image
   </div>
</Card>


const styles = {
   media: {
      height: 0,
      paddingTop: '56.25%' // 16:9
   },
   overlay: {
      position: 'relative',
      top: '20px',
      left: '20px',
      color: 'black',
      backgroundColor: 'white'
   }
}

我尝试将文本div放置在CardMedia之上，之下，内部，整个Card外部，并使用不同的位置值，但根本无法弄清楚。Beta版的MaterialUI在CardMedia上包含了overlay属性，但是v1库似乎没有这样的东西。

任何人都知道如何正确执行此操作吗？在此先感谢您的帮助！

我试图对数据库进行一堆嵌套调用,并希望在结果全部返回后执行某些操作.如果我完全做错了(可能就是这种情况),我是新来的承诺所以请原谅我

我的代码目前是这样的:

getVideos(user).then((videos) => {
  videos.forEach((video) => {
    getImage(video).then(() => {
      getMembers().then((members) => {
        getComments().then((comments) => {
          getKeywords().then((keywords) => {
            getTranscript().then((transcript) => {
              console.log(members, comments, keywords, transcript)
            }
          }
        }
      }
    })
  })
})

这显然是超级低效的,因为getMembers(),getComments(),getKeywords(),并且getTranscript()不需要等待对方,都可以异步调用.也getImage()可以为循环中的每个视频异步调用,而无需等待.

我正在尝试更改代码以将这些promises捆绑成一个大的,所以一旦它解析,我可以在一个地方访问所有获取的数据.这是我的尝试,但它打印出来

承诺{...},承诺{...},承诺{...},承诺{...}

而不是获取的数据.

知道我做错了什么以及如何将所有这些嵌套的承诺正确地改为一个？谢谢

let members, comments, keywords, transcript

getVideos(user).then((videos) => {
   let promises = []
   videos.forEach((video) => {
      let p = getImage(video).then(() => {
        members = getMembers()
        comments = getComments()
        keywords = getKeywords()
        transcript …