小编Jul*_*iño的帖子

我有这个：

import styled from 'react-emotion';

const Box = styled('div')`
  display: flex;
  flex-direction: ${p => p.direction};
`;

Box.defaultProps = {
  direction: 'column'
};

当我使用 Box 组件时，这工作得很好。默认的 props 就如预期的那样存在。

但是，当我使用 styled 重用 Box 时，默认的 props 不会被传递：

import styled from 'react-emotion';
import Box from './Box';

export const UniqResponsiveBox = styled(Box)`
  // some media queries and other new styles
`;

当我使用 UniqResponsiveBox 时，它没有我为 Box 声明的 defaultProps。以下解决方法让我通过了，但似乎多余，我相信我错过了一些仅使用情感来完成此任务的东西。

import styled from 'react-emotion';

const BoxContainer = styled('div')`
  display: flex;
  flex-direction: ${p => p.direction};
`;

function Box(props) { …

我正在使用npm，webpack，babel环境使用p5.js编写应用程序。为了能够将草图作为模块，我将草图设置为实例模式，并将库和附加组件作为模块导入：

import p5 from 'p5';
import 'p5/lib/addons/p5.sound';
import 'p5/lib/addons/p5.dom';

然后将它们加载到草图中的窗口中：

const sketch = (p5) => {
   window.p5 = p5;
   ...
}
new p5(sketch);

当我尝试使用时：

amp = new p5.Amplitude()

我收到“ p5.Amplitude不是构造函数”错误。我的预测是在窗口上命名库p5与使用库中使用p5的构造函数（例如p5.Amplitude，p5.Vector，p5.Soundfile）之间存在冲突。我还没有找到在实例模式下使用这些对象或构造函数的解决方法。但是，我可以使用不需要构造函数的这些对象中的方法。例如，loadSound()是p5.Soundfile的方法。以下作品：

sound = p5.loadSound('assets/sound.wav)

但是当我尝试时，console.log(p5.SoundFile)我变得不确定。

我迷路了！

我在生产中使用react-router-dom遇到麻烦。虽然我的应用程序页眉和页脚呈现得很好，但路由器无法正常工作，并且在Chrome devtools中检查html时，可以看到以下注释，其中我的路由应该出现在哪里。我没有控制台错误。

<div>
  <!-- react-empty: 15 -->
  <!-- react-empty: 16 -->
  <!-- react-empty: 17 -->
  <!-- react-empty: 18 -->
</div>

这是我的App.js组件文件：

import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';

import styled from 'styled-components';

import Header from 'components/Header';
import Footer from 'components/Footer';

import Home from 'containers/Home';
import Select from 'containers/Select';
import Process from 'containers/Process';
import Privacy from 'containers/Privacy';

const AppWrapper = styled.div`
    font-family: 'Open Sans', sans-serif;
    width: 100%;
    max-width: calc(768px + 16px * 2);
    margin: 0 …