3.8 KiB
3.8 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036141 | Getting Started with React Redux | 6 | false | React Redux入门 |
Description
react-redux
包。它为您提供了Redux的传递方式state
,并dispatch
到你的反应的组分作为props
。在接下来的几个挑战中,首先,您将创建一个简单的React组件,允许您输入新的文本消息。这些将添加到视图中显示的数组中。这应该是您在React课程中学到的内容的一个很好的回顾。接下来,您将创建一个Redux存储和操作来管理messages数组的状态。最后,您将使用react-redux
将Redux存储与您的组件连接,从而将本地状态提取到Redux存储中。 Instructions
DisplayMessages
组件开始。一个构造添加到该组件,并使用具有两个属性的状态初始化: input
,其被设置为一个空字符串,和messages
,这是设置为空数组。 Tests
tests:
- text: <code>DisplayMessages</code>组件应呈现一个空的<code>div</code>元素。
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); return mockedComponent.find("div").text() === "" })(), "The <code>DisplayMessages</code> component should render an empty <code>div</code> element.");'
- text: 应该使用<code>super</code>正确调用<code>DisplayMessages</code>构造函数,传入<code>props</code> 。
testString: 'getUserInput => assert((function() { const noWhiteSpace = getUserInput("index").replace(/\s/g,""); return noWhiteSpace.includes("constructor(props)") && noWhiteSpace.includes("super(props"); })(), "The <code>DisplayMessages</code> constructor should be called properly with <code>super</code>, passing in <code>props</code>.");'
- text: '<code>DisplayMessages</code>组件的初始状态应等于<code>{input: "", messages: []}</code> 。'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const initialState = mockedComponent.state(); return typeof initialState === "object" && initialState.input === "" && Array.isArray(initialState.messages) && initialState.messages.length === 0; })(), "The <code>DisplayMessages</code> component should have an initial state equal to <code>{input: "", messages: []}</code>.");'
Challenge Seed
class DisplayMessages extends React.Component {
// change code below this line
// change code above this line
render() {
return <div />
}
};
After Test
console.info('after the test');
Solution
// solution required