你們在經過reactjs編寫app組件之間傳值過程當中,可能會遇到以下錯誤:javascript
make sure to pass up the same props that your components's constructor was passed.java
致使該問題的緣由是由於咱們在接收值的組件中沒有在其constructor中添加對super方法調用的時候沒有傳入props變量,你們只要在接收值的component組件的constructor中在調用super方法的時候添加props變量便可,該變量表示了在外部構造組件的時候,組件所接收到的外部傳入的值。該種方式一般發生在父組件像子組件傳遞值的過程當中。react
下面經過一個例子幫你們理解一下:app
class List extends React.Component {
constructor(props) {
super(props);
this.tag = props.tag;
this.attributes = props.attributes;
this.items = props.items;
}
render() {
return React.createElement(
this.props.tag,
this.props.attributes,
items.map(
(n, i) =>
new React.createElement(ListItem, {
attributes: { n.attributes, key: i },
value: n.value
})
)
);
}
}
class ListItem extends React.Component {
constructor(props) {
super(props);
this.attributes = props.attributes;
this.value = props.value;
}
render() {
return React.createElement("li", this.props.attributes, this.props.value);
}
}
const items = [
{ attributes: null, value: "A" },
{ attributes: null, value: "B" },
{ attributes: null, value: "C" },
{ attributes: null, value: "D" },
{ attributes: null, value: "E" }
];
const root = document.getElementById("root");
ReactDOM.render(
new React.createElement(List, { tag: "ul", attributes: null, items }),
root
);複製代碼
相關資料:ui