3.2 KiB
3.2 KiB
id | title | challengeType | forumTopicId | dashedName |
---|---|---|---|---|
5a24c314108439a4d403616e | 使用 this.props 访问 Props | 6 | 301375 | access-props-using-this-props |
--description--
前几项挑战涵盖了将 props 传递给子组件的基本方法。 但是,倘若接收 prop 的子组件不是无状态函数组件,而是一个 ES6 类组件又当如何呢? ES6 类组件访问 props 的方法略有不同。
任何时候,如果要引用类组件本身,可以使用 this
关键字。 要访问类组件中的 props,需要在在访问它的代码前面添加 this
。 例如,如果 ES6 类组件有一个名为 data
的 prop,可以在 JSX 中这样写:{this.props.data}
。
--instructions--
在父组件 App
中渲染 Welcome
组件的一个实例。 在这里,给 Welcome
一个 name
的 prop,并给它赋值一个字符串。 在 Welcome
的子节点里,访问 strong
标签内的 name
prop。
--hints--
App
组件应返回单个 div
元素。
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(App));
return mockedComponent.children().type() === 'div';
})()
);
App
的子组件应该是 Welcome
组件。
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(App));
return (
mockedComponent.children().childAt(0).name() === 'Welcome'
);
})()
);
Welcome
组件应该有一个名为 name
的 prop。
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(App));
return mockedComponent.find('Welcome').props().name;
})()
);
Welcome
组件应显示你在 strong
标签中作为 name
属性传递的字符串。
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(App));
return (
mockedComponent.find('strong').text() ===
mockedComponent.find('Welcome').props().name
);
})()
);
--seed--
--after-user-code--
ReactDOM.render(<App />, document.getElementById('root'))
--seed-contents--
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
{ /* Change code below this line */ }
<Welcome />
{ /* Change code above this line */ }
</div>
);
}
};
class Welcome extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
{ /* Change code below this line */ }
<p>Hello, <strong></strong>!</p>
{ /* Change code above this line */ }
</div>
);
}
};
--solutions--
class Welcome extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
{ /* Change code below this line */ }
<p>Hello, <strong>{this.props.name}</strong>!</p>
{ /* Change code above this line */ }
</div>
);
}
};
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
{ /* Change code below this line */ }
<Welcome name="Quincy"/>
{ /* Change code above this line */ }
</div>
);
}
};