Question

我有一个广告系列对象，其中包含名称和广告属性。广告属性本身是一个具有角色列表的对象。我想将这些角色列表传递给子组件（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>
    );
  }
}

Answer 1

您可以将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>
    });
  }

将角色列表传递给子组件

1 个答案: