小编Kel*_*gan的帖子

动态插入将通过Reactjs执行的脚本标记

关于这一点有很多答案,但我正在寻找特定于reactjs的东西

我的组件代码:

  render: function () {

    return (
      <Modal {...this.props} title="Embed on your own site!">
        <div className="modal-body">
          <div className="tm-embed-container" dangerouslySetInnerHTML={{__html: embedCode}}>
          </div>
          <textarea className="tm-embed-code" rows="4" wrap="on" defaultValue={embedCode}></textarea>
        </div>
      </Modal>
    );
  }
});
Run Code Online (Sandbox Code Playgroud)

脚本标记在页面上,但没有执行.我是否应该做出反应,只是使用好的'DOM脚本',正如其他答案所示?

reactjs react-jsx

12
推荐指数
1
解决办法
2万
查看次数

使用test utils而不是重新呈现组件在reactjs组件上调用setState

我在基于jest的测试中有以下代码:

it('will show the hero loop if there is one', function() {

    var React = require('react/addons');
    var ShowsDetailHeader = require('../../../../routes/shows/components/ShowsDetailHeader.jsx');
    var mockData = require('../../../../mock/episodeDetailData');
    mockData.data.show.assets._webHeroVideoUrl = 'https://test.video.com';

    var Subject = require('../../../../mock/stubRouterContext')(ShowsDetailHeader,  {
      show: mockData.data.show
    });

    var TestUtils = React.addons.TestUtils;

    var showsHeader = TestUtils.renderIntoDocument(
      <Subject />
    );

    showsHeader.setState({
      showVideo: true
    });

    var videoClass = TestUtils.findRenderedDOMComponentWithClass(showsHeader, 'flex-video').getDOMNode().getAttribute('class');

    expect(videoClass.indexOf('in')).toBe(-1);

    console.log(videoClass);


  });
Run Code Online (Sandbox Code Playgroud)

我之前的测试测试了组件的初始状态.我现在想要在状态改变后调用setState来检查组件.我在这里登录的videoClass保持不变.我在反应0.12.最新的开玩笑0.4.0.

关于如何测试设置状态后发生的事情的任何想法?

reactjs jestjs

7
推荐指数
1
解决办法
3271
查看次数

启用了react-loadable的组件在从父级发送时未收到新的道具

我有一个通过react-loadable 加载的组件。正在加载的组件在 componentWillReceiveProps 中有一些逻辑,用于检测是否需要获取更多数据等。

当通过react loadable加载时,它调用render 1次,并且永远不会调用componentWillReceiveProps。

import React from 'react'
import Loadable from 'react-loadable'

import Loading from 'components/Loading'

const LoadableThing = Loadable({
  loader: () => import('components/Thing'),
  loading: Loading,
  render(loaded, props) {
    let Component = loaded.default;
    return <Component {...props}/>
  }
});

export default LoadableThing
Run Code Online (Sandbox Code Playgroud)

该组件包含在另一个组件中,该组件进行一些初始数据调用并将结果发送到Thing

有什么想法吗?它return <Component再次调用,但在这种情况下它似乎正在创建一个新组件。

reactjs react-loadable

5
推荐指数
0
解决办法
1899
查看次数

标签 统计

reactjs ×3

jestjs ×1

react-jsx ×1

react-loadable ×1