小编ffx*_*sam的帖子

在动作创建者中访问Redux状态?

说我有以下内容:

export const SOME_ACTION = 'SOME_ACTION';
export function someAction() {
  return {
    type: SOME_ACTION,
  }
}
Run Code Online (Sandbox Code Playgroud)

在该动作创建者中,我想访问全局存储状态(所有reducers).这样做更好:

import store from '../store';

export const SOME_ACTION = 'SOME_ACTION';
export function someAction() {
  return {
    type: SOME_ACTION,
    items: store.getState().otherReducer.items,
  }
}
Run Code Online (Sandbox Code Playgroud)

或这个:

export const SOME_ACTION = 'SOME_ACTION';
export function someAction() {
  return (dispatch, getState) => {
    const {items} = getState().otherReducer;

    dispatch(anotherAction(items));
  }
}
Run Code Online (Sandbox Code Playgroud)

javascript redux

263
推荐指数
3
解决办法
12万
查看次数

React - 如何在道具中传递HTML标签?

我希望能够使用HTML标记传递文本,如下所示:

<MyComponent text="This is <strong>not</strong> working." />
Run Code Online (Sandbox Code Playgroud)

但是在MyComponent渲染方法中,当我打印出来时this.props.text,它会打印出所有内容:

This is <strong>not</strong> working.
Run Code Online (Sandbox Code Playgroud)

有没有办法让React解析HTML并将其正确地转储出去?

reactjs

98
推荐指数
9
解决办法
8万
查看次数

詹金斯 - 如何建立一个特定的分支

这并不像只进行参数化构建那么简单.我已经有了一个特定的构建过程,只要将任何这些分支推送到GitHub,它就会构建和部署:

在此输入图像描述

所以,如果我只是推动develop并成功构建,我该如何触发手动构建并将其拉出feature/my-new-feature(不做git push)?我尝试启用参数化构建,添加一个名为的新字符串branch,然后添加一个新的分支说明符,*/$branch.然后我运行了一个构建并设置branchfeature/my-new-feature仍然从中拉出来develop.

我很感激任何帮助!

git github jenkins

87
推荐指数
5
解决办法
11万
查看次数

React - 动画装载和卸载单个组件

这个简单的东西应该很容易实现,但是我把头发拉出来是多么复杂.

我想做的就是动画安装和卸载React组件,就是这样.这是我到目前为止所尝试的以及为什么每个解决方案都不起作用:

  1. ReactCSSTransitionGroup - 我根本不使用CSS类,它是所有JS样式,所以这不起作用.
  2. ReactTransitionGroup - 这个较低级别的API很棒,但它要求你在动画完成时使用回调,所以只使用CSS过渡在这里不起作用.总有动画库,这导致下一点:
  3. GreenSock - 许可证对于商业用途IMO来说过于严格.
  4. React Motion - 这看起来很棒,但是TransitionMotion对于我需要的东西来说却非常混乱和过于复杂.
  5. 当然我可以像Material UI那样做一些技巧,其中元素被渲染但保持隐藏(left: -10000px)但我宁愿不去那条路线.我认为它很hacky,我希望卸载我的组件,以便清理它们并且不会使DOM混乱.

我想要一些易于实现的东西.在mount上,动画一组样式; 在卸载时,为相同(或另一组)样式设置动画.完成.它还必须在多个平台上具有高性能.

我在这里碰到了一堵砖墙.如果我遗漏了一些东西并且有一个简单的方法可以做到这一点,请告诉我.

animation css-animations greensock reactjs react-motion

73
推荐指数
6
解决办法
4万
查看次数

酶 - 如何访问和设置<input>值?

我对使用<input>时如何获取价值感到困惑mount.以下是我的测试结果:

  it('cancels changes when user presses esc', done => {
    const wrapper = mount(<EditableText defaultValue="Hello" />);
    const input = wrapper.find('input');

    console.log(input.render().attr('value'));
    input.simulate('focus');
    done();
  });
Run Code Online (Sandbox Code Playgroud)

控制台打印出来undefined.但是,如果我稍微修改代码,它的工作原理:

  it('cancels changes when user presses esc', done => {
    const wrapper = render(<EditableText defaultValue="Hello" />);
    const input = wrapper.find('input');

    console.log(input.val());
    input.simulate('focus');
    done();
  });
Run Code Online (Sandbox Code Playgroud)

当然,除了input.simulate我现在使用之外,这条线路都失败render了.我需要两个都正常工作.我该如何解决?

编辑:

我应该提一下,<EditableText />不是一个受控组件.但是当我defaultValue进入时<input />,它似乎设定了价值.上面的第二个代码块会打印出值,同样如果我在Chrome中检查输入元素并输入$0.value控制台,它会显示预期值.

unit-testing reactjs enzyme

67
推荐指数
5
解决办法
6万
查看次数

在React中,onChange和onInput之间有什么区别?

我已经尝试过寻找答案,但其中大多数都不在React的背景下,onChange触发模糊.

在执行各种测试时,我似乎无法分辨这两个事件是如何不同的(当应用于textarea时).任何人都可以对此有所了解吗?

javascript dom-events reactjs

61
推荐指数
6
解决办法
3万
查看次数

无法使用AWS Lambda函数将日志(文本输出)记录到CloudWatch

我正在尝试设置一个Lambda函数,该函数会在文件上传到S3存储桶时对其进行处理.我需要一种方法来查看console.log上传文件时的输出,但我无法弄清楚如何将我的Lambda函数链接到CloudWatch.

我通过查看context我的日志组/aws/lambda/wavToMp3和日志流的对象来计算2016/05/23/[$LATEST]hex_code_redacted.所以我在CloudWatch中创建了该组和流,但没有记录任何内容.

amazon-web-services amazon-cloudwatch aws-lambda

58
推荐指数
5
解决办法
3万
查看次数

将propTypes和defaultProps作为静态道具放在React类中是否可以?

这是我现在已经做了很长时间的方式了:

export default class AttachmentCreator extends Component {
  render() {
    return <div>
      <RaisedButton primary label="Add Attachment" />
    </div>
  }
}

AttachmentCreator.propTypes = {
  id: PropTypes.string,
};
Run Code Online (Sandbox Code Playgroud)

但我看到有人这样做:

export default class AttachmentCreator extends Component {
  static propTypes = {
    id: PropTypes.string,
  };

  render() {
    return <div>
      <RaisedButton primary label="Add Attachment" />
    </div>
  }
}
Run Code Online (Sandbox Code Playgroud)

事实上,我已经看到人们在构造函数之外设置初始状态.这是好习惯吗?这一直困扰着我,但我记得在某个地方有人说将默认道具设置为静态不是一个好主意的讨论 - 我只是不记得原因.

class reactjs ecmascript-next

35
推荐指数
3
解决办法
2万
查看次数

如何使CloudFront永远不会在S3存储桶上缓存index.html

我在S3存储桶上托管了一个React应用程序.使用yarn build(这是一个基于create-react-app的应用程序)缩小代码.该build文件夹看起来像:

build
??? asset-manifest.json
??? favicon.ico
??? images
?   ??? map-background.png
?   ??? robot-icon.svg
??? index.html
??? js
?   ??? fontawesome.js
?   ??? packs
?   ?   ??? brands.js
?   ?   ??? light.js
?   ?   ??? regular.js
?   ?   ??? solid.js
?   ??? README.md
??? service-worker.js
??? static
    ??? css
    ?   ??? main.bf27c1d9.css
    ?   ??? main.bf27c1d9.css.map
    ??? js
        ??? main.8d11d7ab.js
        ??? main.8d11d7ab.js.map
Run Code Online (Sandbox Code Playgroud)

我永远不想index.html被缓存,因为如果我更新代码(导致十六进制后缀main.*.js更新),我需要用户下次访问以获取<script src>更改index.html以指向更新的代码.

在CloudFront中,我似乎只能排除路径,排除"/"似乎无法正常工作.我得到奇怪的行为,我更改代码,如果我打刷新,我看到它,但如果我退出Chrome和回去,我看到非常过时代码的某些原因.

我不想在每个代码版本上触发失效(通过CodeBuild).还有其他方法吗?我认为,挑战之一是,因为这是使用路由器作出反应的应用程序,我在用错误的文件设置为做一些挂羊头卖狗肉index.html,并迫使HTTP状态200,而不是403.

amazon-s3 amazon-web-services amazon-cloudfront

35
推荐指数
3
解决办法
8890
查看次数

如何在React中使用materialize-css?

我有一个使用ES6模块的Meteor/React项目.我已经使用npm安装了materialize-css,但我不确定如何在我的JSX代码中实际使用Materialize类.我应该从materialize-css导入什么?或者我只需要将CSS包含在我的主index.html文件中?

我主要想要它用于网格系统,因为我将使用material-ui作为实际的UI组件.

materialize npm reactjs material-ui

33
推荐指数
7
解决办法
4万
查看次数