Javascript 将角色列表传递给子组件

我有一个具有名称和广告属性的活动对象。Ads属性本身是一个具有角色列表的对象。我想将这些角色列表传递给子组件（createNewAd）。我现在的做法不管用

这就是我所做的

const campaigns = [
  {
    name: 'Magazine Print', // campaign 2
    ads: [
      {
        name: 'GQ Mag Spring', // ad 1
        scores: [46, 75],
        personas: []
      },
      {
        name: 'Vogue Mag Spring', // ad 2
        scores: [56, 87],
        personas: [
          {
            name: '[[Doug - At Home Writer|||personas/121212]]',
            scores: [
              { score: 42, text: '####% overall' },
              {
                score: 81,
                text: '####% top topic [[Coffeehouse Enlightenment|||boards/123456]]'
              }
            ]
          },
          {
            name: '[[David - Marketing Celebrity|||personas/232323]]',
            scores: [
              { score: 68, text: '####% overall' },
              {
                score: 72,
                text: '####% top topic [[Buyer Personas|||boards/234567]]'
              }
            ]
          },
          {
            name: '[[Ellen - Design Trendsetter|||personas/343434]]',
            scores: [
              { score: 48, text: '####% overall' },
              {
                score: 90,
                text: '####% top topic [[Art Exhibits|||boards/345678]]'
              }
            ]
          },
          {
            name: '[[Steve - Gamer Tech Guy|||personas/454545]]',
            scores: [
              { score: 35, text: '####% overall' },
              {
                score: 52,
                text: '####% top topic [[Video Cards|||boards/456789]]'
              }
            ]
          },
          {
            name: '[[Leslie - Grad at First Job|||personas/676767]]',
            scores: [
              { score: 75, text: '####% overall' },
              {
                score: 85,
                text: '####% top topic [[Small Apartment Living|||boards/567890]]'
              }
            ]
          }
        ]
      },
      {
        name: 'Time Mag Spring', // ad 3
        scores: [62, 83],
        personas: []
      },
      {
        name: 'Wired Mag Spring', // ad 4
        scores: [66, 74],
        personas: []
      },
    ]
  },

  {
    name: 'TV primetime spots', // campaign 3
    ads: []
  },
];

export default class Campaign extends Component {
  state = {
    adsShow: false,
    personasShow: false,
    open: false
  };


  renderPersonas = personas => {
    return personas && personas.map((persona, i) => {
      if (!persona.length === 0) {
        return persona.map((person, i) => console.log('person', person));
      }
    });
  }

  renderCampaigns = () => {
    return campaigns.map((campaign, i) => {
      return (
        <Collapsible
          key={campaign.name}
          classParentString="campaignsCollapse">
          <div className="Ads">
            <span className="cmpTitle">Ads</span>
            <span className="editCampaign">
              <FaPlusCircle onClick={this.handleClick} />
            </span>
          </div>
          <div className="AdsList">
            {this.state.adsShow
              ? <CreateNewAd
                personasClick={this.handlePersonasClick}
                personasShow={this.state.personasShow}
                hideModal={this.hideModal}
                showModal={this.state.open}
                personas={this.renderPersonas(campaign.ads)}
                />
            : null}
            {this.renderAdLists(campaign.ads)}
          </div>
        </Collapsible>
      );
    });
  };
  render() {
    return (
      <div style={{ padding: '10px 20px' }}>
        <h3>Campaigns</h3>
        <div className="campaignsContainer">
          {this.renderCampaigns()}
        </div>
      </div>
    );
  }
}

const活动=[
{
名称：'杂志印刷'，//活动2
广告：[
{
名称：'GQ Mag Spring'，//公元1年
分数：[46,75]，
人物角色：[]
},
{
名称：'时尚杂志春天'，//公元2年
分数：[56,87]，
人物角色：[
{
姓名：“[[Doug-家庭作家| | | personas/121212]”，
分数：[
{分数：42分，正文：'######总体百分比'}，
{
得分：81分，
正文：“######%top top top top top top[[Coffeehouse Implementation | | | boards/123456]”
}
]
},
{
姓名：“[[David-营销名人| | | personas/232323]”，
分数：[
{分数：68分，正文：'######总体百分比'}，
{
得分：72分，
正文：“#####%热门话题[[买家角色| | |董事会/234567]”
}
]
},
{
名称：“[[Ellen-设计潮流引领者| | | personas/343434]”，
分数：[
{分数：48分，正文：'######总体百分比'}，
{
得分：90分，
正文：“#####%热门话题[[艺术展览| | | |展板/345678]”
}
]
},
{
姓名：“[[Steve-Gamer-Tech Guy | | | personas/454545]”，
分数：[
{总分：35分，正文：'#######总分百分比'}，
{
得分：52分，
正文：“#####%热门话题[[视频卡| | |板/456789]”
}
]
},
{
姓名：“[[Leslie-Grad at First Job | | | personas/676767]”，
分数：[
{分数：75分，正文：'#####总体百分比'，
{
得分：85分，
正文：“#####%热门话题[[小公寓生活| | | |板/567890]”
}
]
}
]
},
{
名称：'时间杂志春天'，//公元3年
分数：[62,83]，
人物角色：[]
},
{
名称：'有线磁弹簧'，//公元4年
分数：[66,74]，
人物角色：[]
},
]
},
{
名称：'电视黄金时间节目'，//活动3
广告：[]
},
];
导出默认类活动扩展组件{
状态={
adsShow：错，
人物秀：假，
开放：假
};
renderPersonas=personas=>{
返回personas和personas.map（（persona，i）=>{
如果（！persona.length==0）{
返回persona.map（（person，i）=>console.log（'person'，person））；
}
});
}
渲染公司=（）=>{
返回活动.map（（活动，i）=>{
返回(
广告
{this.state.adsShow
? 
：null}
{this.renderAdLists（campaign.ads）}
);
});
};
render（）{
返回(
活动
{this.renderCompagins（）}
);
}
}

您可以将camapign.ads传递给CreateNewAd组件，然后将其映射到该组件内部的Personas道具上

  <CreateNewAd
            personasClick={this.handlePersonasClick}
            personasShow={this.state.personasShow}
            hideModal={this.hideModal}
            showModal={this.state.open}
            personas={campaign.ads}
            />

在CreateNewAd组件中

 renderPersonas = () => {
    var {personas} = this.props;
    return personas && personas.map((persona, i) => {
        return <div>{persona.personas && persona.personas.map((person, i) => <li>{JSON.stringify(person)}</li>}</div>
    });
  }

renderPersonas=（）=>{
var{personas}=this.props；
返回personas和personas.map（（persona，i）=>{
返回{persona.personas&&persona.personas.map（（person，i）=>
{JSON.stringify（person）}
}
});
}

您有一个错误。就在导出默认值之前…您需要用

]关闭您的活动数组；

很抱歉，我在松弛活动对象时意外地删除了它。您这样做会将数组返回给childComponent

CreateNewAd

我得到未定义的角色。我只想传递角色s对象传递到

CreateNewAd

组件，然后从那里传递到

personas

组件，使用map，我将在列表中显示人物角色的名称。因此，据我所知，您希望一次性传递每个活动下的所有人物角色对象，并在CreateNewAd中呈现它们，是不是

const CreateNewAd=（props）=>{console.log（'personas'，props.personas）；const renderPersonas=props.personas&&props.personas.map（（persona，i）=>{return{persona&&persona.map（（person，i）=>
{JSON.stringify（person）}
）}）；return（

i get persona.map不是函数错误检查更新，内置映射必须位于persona.personas上，而不是Personal乐于帮助：）