小编Tho*_*lle的帖子

我有时会看到人们在withRouter导出它们时将它们包装起来:

import { withRouter } from 'react-router-dom';

class Foo extends React.Component {
  // ...
}

export default withRouter(Foo);

这是什么,我什么时候应该使用它？

我将React网站build/文件夹部署到AWS S3存储桶中.

如果我去www.mywebsite.com,它可以工作,如果我点击a标签去项目和关于页面,它会引导我到正确的页面.但是,如果我复制并发送页面网址或直接转到类似的链接:www.mywebsite.com/projects,则返回404.

这是我的App.js代码:

const App = () => (
    <Router>
        <div>
            <NavBar/>
            <Switch>
                <Route exact path="/" component={Home}/>
                <Route exact path="/projects" component={Projects}/>
                <Route exact path="/about" component={About}/>
                <Route component={NoMatch}/>
            </Switch>
        </div>
    </Router>
);

我试图让样式组件采用作为反应组件的 SVG 并将其设置为背景图像，但出现错误：

类型错误：无法将符号值转换为字符串

SVG 组件代码：

import React from "react";

const testSVG = props => {
  return (
    <svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 193.3 129.7">
      <g>
        <g>
          <g>
            <path
              fill="#434343"
              class="st0"
              d="M162.4,116c-4.6,7.5-15.6,13.6-24.4,13.6H16c-8.8,0-12.3-6.2-7.7-13.7c0,0,4.6-7.7,11.1-18.4
                c4.4-7.4,8.9-14.7,13.3-22.1c1.1-1.8,6.1-7.7,6.1-10.1c0-7.3-15-24.9-18.5-30.7C13.5,23.6,8.3,14.9,8.3,14.9
                C3.7,7.4,7.2,1.2,16,1.2c0,0,65.9,0,106.8,0c10,0,25.9-4.5,33.5,3.8c8.7,9.3,15.5,25.4,22.5,36.8c2.6,4.2,14.5,18.3,14.5,23.8
                c-0.1,7.6-16,26.1-19.6,32C167.1,108.3,162.4,116,162.4,116z"
            />
          </g>
        </g>
      </g>
    </svg>
  );
};

export default testSVG;

容器组件代码：

import React, { Component } from "react";
import StepSVG from "../../components/UI/SVGs/Test";

class StepBar extends Component {
  render() {
    const { steps } = this.props;

    return (
      <div>
        {steps
          ? steps.map(step => { …

组件.svelte

<script>
  export let hiddenStatus;
</script>

<div class:hidden={hiddenStatus}></div>

应用程序.svelte

<script>
  import Component from "./Component.svelte";
</script>

<Component hiddenStatus={true}/>
{Component.hiddenStatus}

当我尝试获取该属性值时，hiddenStatus它显示为undefined. 我该如何解决这个问题？

假设一个页面包含多阶段表单，在表单的第一阶段包含名称的输入字段，在第二阶段它包含文件的输入，onChange 设置名称和文件的状态值，但是当我们像第一阶段到第二阶段一样来回移动时阶段和第二阶段，我们可以保存输入类型名称的值，但如何保存输入类型文件的值。

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pageone: true,
      pagetwo: false,
      pagethree: false,
      pageonedata: "",
      pagetwodata: "",
      pagethreedata: ""
    };
    this.nextPage = this.nextPage.bind(this);
    this.prevPage = this.prevPage.bind(this);
    this.togglePage = this.togglePage.bind(this);
  }

  prevPage() {
    if (this.state.pagetwo === true) {
      this.setState({
        pageone: !this.state.pageone,
        pagetwo: !this.state.pagetwo
      });
    } else if (this.state.pagethree === true) {
      this.setState({
        pagethree: !this.state.pagethree,
        pagetwo: !this.state.pagetwo
      });
    }
  }

  nextPage() {
    if (this.state.pageone === true) {
      this.setState({
        pageone: …

我已经阅读了React中的嵌套组件.

我尝试了这个例子并注意到每次我更新父组件的状态(todolist).DOM树重新渲染整个而不是添加新的.

我的问题是:这是一种我们应该避免的反模式吗？

const TodoList = ({ todos, onTodoClick }) => {
  const Todo = ({ completed, text, onClick }) => {
    return (
      <li onClick={onClick} style={{ textDecoration: completed ? 'line-through' : 'none' }}>
        {text}
      </li>
    );
  };
  return todos.map(todo => <Todo key={todo.id} {...todo} onClick={() => onTodoClick(todo.id)} />);
};

这是我的测试

我正在尝试使用通过Gmail API在Javascript客户端附加的jpeg文件发送消息.我到目前为止编写的代码如下:

$.ajax({
  type: "POST",
  url: "https://www.googleapis.com/upload/gmail/v1/users/me/messages/send?uploadType=multipart",
  headers: {
    'Authorization': 'Bearer ' + accessToken,
    'Content-Type': 'multipart/related; boundary="foo_bar_baz"'
  },
  data: data
});

哪里data是一个字符串建立类似的例子在这里找到:

--foo_bar_baz
Content-Type: application/json; charset=UTF-8

{ 
  "raw": "RnJvbTogRW1pbCBUaG9saW4gPGVtdGhvbGluQGdtYWlsLmNvbT4KVG86IEV4YW1wbGUgTmFtZSA8ZW10aG9saW5AZ21haWwuY29tPgpTdWJqZWN0OiBzZHNkCgpzZHNk"
}

--foo_bar_baz
Content-Type: image/jpeg

data:image_jpeg;base64,_9j_4AAQSkZJRgABAQEAYABgAAD_2wBDAAIBAQIBAQICAgICAgIC…bHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3-Pn6_9oADAMBAAIRAxEAPwD-f-iiigD_2Q==

--foo_bar_baz--

我得到的错误是Media type 'image/jpeg' is not supported. Valid media types: [message/rfc822]可以理解的,因为[message/rfc822]根据规范,媒体是唯一有效的MIME类型,但上面链接的示例另有说明.

我究竟做错了什么？如果有人能够对此有所了解,我将不胜感激!

数据

var ranges = [
        { start: 2, end: 5 },
        { start: 8, end: 12 },
        { start: 15, end: 20 },
        { start: 9, end: 11 },
        { start: 2, end: 6 }
    ];

每个对象代表一个范围.我需要删除包含在另一个中的范围.也就是说,在两个冗余对象之间我需要保持更长的范围.

我写了这段代码,但我想知道是否有更好的方法来实现这个使用lodash.

var Range = {
    contains: function(r1, r2) {
        return r2.start >= r1.start && r2.end <= r1.end;
    }
};

var result = _.chain(ranges)
    .filter(function(r2) {
        return !_.some(ranges, function(r1) {
            return r1 != r2 && Range.contains(r1, r2);
        });
    })
    .value();

console.log(result);

产量 …

也许 75-80% 的时间，我可以git pull在我的 EC2 Linux 服务器上运行，然后npm run build创建我的 React 应用程序的生产就绪构建。然而，有时，在运行后npm run build，整个服务器会冻结，我不得​​不强制重启几次才能让它再次启动并运行。

这似乎是完全随机的。某些 JavaScript 编译（我猜？）过程可能会撞倒整个服务器，这似乎非常奇怪，但它发生的频率足够高，显然不是由其他任何原因引起的。

这是有人遇到过的吗？

我正在使用react-select中的CreatableSelect组件。现在，用户可以选择任意数量的项目，但我希望用户选择的项目不超过5个。如何限制可以选择的最大选项数？

<CreatableSelect
  classes={classes}
  styles={selectStyles}
  textFieldProps={{
    label: "Tags"
  }}
  options={suggestions}
  components={components}
  value={this.state.multi}
  onChange={this.handleChange("multi")}
  placeholder=""
  isMulti
/>