关于这一点有很多答案,但我正在寻找特定于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脚本',正如其他答案所示?
我在基于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.
关于如何测试设置状态后发生的事情的任何想法?
我有一个通过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再次调用,但在这种情况下它似乎正在创建一个新组件。