make sure to pass up the same props that your component's constructor was passed

你們在經過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

stackoverflow.com/questions/5…
this

相關文章
相關標籤/搜索