反應將數據傳遞給兩個組件，但一個渲染失敗

Question

我使用react來創建一個子菜單項。父組件獲得json，並將json傳遞給另一個兩個子組件。

class SubMenu extends React.Component {
  render() {
    var submenulink = require("../../../conf/navigation.json")

  return (
    <div>
       <PoliticsSubMenu politics_link={submenulink.politics}/>
       <LawSubMenu law_link={submenulink.law}/>
    </div>
)}}


class PoliticsSubMenu extends React.Component {
  render() {
    return (
      <SubMenuList link={this.props.politics_link} />
)}}

class LawSubMenu extends React.Component {
  render() {
    console.log(this.props.law_link)
    return (
      <SubMenuList link={this.props.law_link}/>
    )
  }
}
class SubMenuList extends React.Component {

  render() {
    const links = this.props.link;
    const listNames = links.map((item) =>
      <li>{item.description}</li>
    )

    return (
      <li className="active">
          <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">politics</a>
          <ul className="collapse list-unstyled" id="homeSubmenu">
              <li>{listNames}</li>
          </ul>
      </li>
    )
  }
}

Answer 1

我用示例代碼對您的“ submenulink”對象進行了硬編碼，並將其呈現在以下沙箱中： https ://codesandbox.io/s/pmx95r935m。 您的“ navigation.json”文件是什么樣的？

class SubMenu extends React.Component {
  render() {
    var submenulink = {
      politics: [{ description: "First" }, { description: "Second" }],
      law: [{ description: "Premiero" }, { description: "Segundo" }]
    };

    return (
      <div>
        <PoliticsSubMenu politics_link={submenulink.politics} />
        <LawSubMenu law_link={submenulink.law} />
      </div>
    );
  }
}

其他想法：

1. SubMenuList組件在{listNames}周圍不應有<li>標記。 每個listName項周圍都有一個<li> 。
2. SubMenuList有一個listNames列表。 列表應包含鍵。 例如： links.map((item, i) => <li key={i}>{item.description}</li>) “鍵可幫助React識別哪些項目已更改，添加或刪除。來自數組內部的元素，以賦予元素穩定的身份”， 網址為https://reactjs.org/docs/lists-and-keys.html 。

3. 沒有狀態的組件的簡單語法（又稱“啞”組件）可以使組件定義保持簡潔。

    const PoliticsSubMenu = (props) => <SubMenuList link={props.politics_link} />;