小编Ale*_*nic的帖子

我将我的角度项目和所有依赖项更新到最新版本.我没有遇到太多麻烦,我解决了大多数依赖问题,但我仍然坚持使用RxJs.这是我的package.json:

  "dependencies": {
    "@angular-devkit/build-angular": "^0.6.0",
    "@angular/animations": "^6.0.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "angular-bootstrap-md": "^6.0.1",
    "core-js": "^2.5.5",
    "font-awesome": "^4.7.0",
    "rxjs": "^6.1.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "~6.0.0",
    "@angular/compiler-cli": "^6.0.0",
    "@angular/language-service": "6.0.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "electron": "^1.8.3",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.2",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.4.2",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^1.0.0",
    "protractor": "~5.3.1",
    "ts-node": "~6.0.2",
    "tslint": "~5.10.0",
    "typescript": "~2.7.2"

我只是从RxJs导入模块:

import { fromPromise } from …

我正在尝试throttle在功能组件中使用lodash中的方法，例如：

const App = () => {
  const [value, setValue] = useState(0)
  useEffect(throttle(() => console.log(value), 1000), [value])
  return (
    <button onClick={() => setValue(value + 1)}>{value}</button>
  )
}

由于内部方法useEffect在每次渲染时都会重新声明，因此限制效果不起作用。

有没有人有一个简单的解决方案？

假设Component我想要访问第3个孩子.

<Component>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</Component>

实际上,我发现了3种方法:

1)使用React.children.map

const Component = ({children}) => 
  <>{React.Children.map(children, (child, i) => i === 2 && child)}</>

工作得很好但是很冗长并且在O(n)中.

2)使用React.Children.toArray

const Component = ({children}) =>
  <>{React.Children.toArray(children)[2]}</>

不那么冗长,但我不知道复杂性.是O(1)？如果是这样,它的表现是否足够？

3)Direclty使用子元素作为数组

const Component = ({children}) => <>{children[2]}</>

乍一看它看起来很理想但如果孩子们作为阵列传递它将无法正常工作.例如,如果我写了这样的东西:

<Component>
  <div>1</div>      
  {[2, 3].map(i => <div key={i}>{i}</div>)}
</Component>

Component将假设只有2个孩子,其中第2个是2个孩子的阵列.因此children[2]不会存在.

所以我的问题是:让孩子进入指数的最佳方法是什么？方法toArray比效率更高map吗？或者有没有办法解决3)选项的问题？

问题就在标题里。下面是我想要实现的目标的示例：

const apiResponse = Promise.resolve({data: 1} as {data: any}); // Assume I don't know the type of data
const mapData = <T>(res: {data: T}): T => res.data;

const x = apiResponse.then(mapData<number>); // This one fails to compile
const y = apiResponse.then(mapData); // Succeeded but y is of type any
const z = apiResponse.then(_ => mapData<number>(_)); // Succeeded in some case it is inconvenient to forward parameters

我正在尝试创建一个 React 库。组件导入 Sass 文件如下：

import "./cp.scss";

class Cp extends Component {
    render() {...}
}

为此，我使用 babel 通过添加以下脚本将库编译为 es5：

包.json

...
"scripts": {
  ...
  "compile": "babel -d lib/ src/" 
}

它工作正常，我得到一个看起来像这样的组件：

...
var Cp = function (_Component) {
...
exports.default = Cp;

例外的是 Babel 无法处理我的 Sass 文件。因此，当我尝试在另一个项目中导入组件时，出现以下错误

Module not found: Error: Cannot resolve 'file' or 'directory' ./cp.scss in ...

使用 webpack，我设法将我的库编译成单个 js 文件。但我想保留文件结构（就像material-ui一样），这样我就可以从其他应用程序（例如import {Cp} from 'library'.

有没有办法使用 wepback 或其他方法来处理 Sass 文件来实现相同的库输出？

我创建了一个简单的HOC，可以translate在组件中注入方法。

export interface IMessageProps {
  translate: (key: string) => string;
}

export const message = <P extends object>(
  Component: React.ComponentType<P & IMessageProps>
): React.SFC<P & IMessageProps> => (props: P) => {

  const translate = (key: string): string => messages[key];

  return <Component {...props} translate={translate}/>;
};

用法：

class MyComponent extends React.Component<IMessageProps, {}> {
  render() {
    return (
      <>{this.props.translate('hello.world')}</>
    );
  }
}

export default message(MyComponent);

当我想调用组件时会出现问题，<MyComponent/>因为tsc抱怨该属性translate未传递给MyComponent并期望类似之类的东西<MyComponent translate={...}/>。

Type '{}' is not assignable to …

在下面的简单示例中，我正在寻找一种方法来获取例如CardBodychild.

const Card = ({children}) => {
  const cardHeadChild = ...;
  const cardBodyChild = ...;
  return (
    <div>
      {cardHeadChild}
      {cardBodyChild}
    </div>
  )
}

const CardHead = () => <div>Head</div>
const CardBody = () => <div>Body</div>

// Usage:
<Card>
  <CardHead>
  <CardBody>
</Card>

我无法通过索引获取（例如：）React.Children.toArray(children)[1]，因为孩子是可选的。

我尝试过这样的事情：

React.Children.forEach(children, child => {
   if(child.type.name === 'CardBody') cardBodyChild = child
   // or
   if(child.type.displayName === 'CardBody') cardBodyChild = child
  ..
})

但当组件被封装在 HOC 中时它不起作用。

有什么解决办法吗？

这是一个非常简单的用例，但我没有找到任何优雅的方法来处理它。

下面是我正在尝试做的事情。说的很清楚了...

注意： users.byEmail返回一个Future[Option[User]].

override def invokeBlock[A](request: Request[A], block: UserRequest[A] => Future[Result]): Future[Result] = {
  val useEmail: Option[String] = request.session.get("userEmail")
  if (useEmail.isEmpty) {
    return Future.successful(Results.Unauthorized(("No email")))
  }
  val user: Option[User] = Await.result(users.byEmail(useEmail.get), Duration(1, TimeUnit.MINUTES))
  if (user.isEmpty) {
    return Future.successful(Results.Unauthorized(("No user")))
  }
  block(UserRequest(user.get, request))
}

写这个的“正确”方法是什么？

我有一个可变字符串mymvariable

其中包含 ：

864827,,,34200,S\xc3\xa8te ,,,445958,,,30220,AIGUES MORTES,,,169807,,,34570,PIGNAN,,,546049,,,13006,MARSEILLE,,\n

我想将此字符串转换为如下数组：

1 864827,,,34200,S\xc3\xa8te ,,, \n2 445958,,,30220,AIGUES MORTES,,, \n3 169807,,,34570,PIGNAN,,, \n4 546049,,,13006,MARSEILLE,,\n

我尝试使用：

var array = myvariable.split(",");\n

但是当我做一个 array[0] 时，它给了我这里的第一个字段：

\n

864827

\n

当我像这样执行 array[0] 时，我希望有第一行：

\n

1 864827,,,34200,S\xc3\xa8te ,,,

\n

是否可以像这样格式化字符串？

感谢您