Question

我使用的是方阵。我确实设法从数组中获取数据。

http://tinypic.com/view.php?pic=9a39z9&s=9#.XDJQyVxKjIV->正如您所看到的，我的图片阵列中有3张带有3张不同图片的卡片。

但是我希望得到的是那三张卡各有不同的标题和文字。

这是我要实现的目标的示例-> http://tinypic.com/view.php?pic=289x2kz&s=9#.XDJQ9lxKjIV

这是我的代码：

`componentDidMount() {
    fetch("https://pixabay.com/api/?key=11095386-871fd43c33a92700d9bffb82d&q=travel&image_type=photo&pretty=true")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            apiImg: result.hits
          });
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }` --> this is where I fetch my api

这是我的卡：

`{
            apiImages.slice(0,9).map(img => (
            <Card className="api" shadow={5} style={{ minWidth: '450', margin: 'auto' }}>
            <a href="/alleblogs">
            <CardTitle style={{ 
                color: '#fff', 
                height: '176px', 
                backgroundImage: url(${img.largeImageURL}), 
                backgroundPosition: 'center', 
                backgroundSize: 'cover'
            }}>Golden Bridge</CardTitle>
            <CardText>
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis distinctio esse qui eos, ad provident,
            </CardText>
            <CardActions border>
                <Button style={{ color: '#8dd5e8' }}>Likes:</Button>
                <Button style={{ color: '#8dd5e8' }}>Share</Button>
            </CardActions>
            </a>
            </Card>
            ))
            }`

如您所见，我正在使用仅一张卡片的循环。但是我想要的是拥有3张卡片，每张卡片的文字和标题都不相同。

我希望有人可以帮助我。

Answer 1

这不可能是最好的。但可以解决您的问题。

只需更改以下内容即可。.

<CardTitle style={[{ 
                color: '#fff', 
                height: '176px', 
                backgroundImage: url(${img.largeImageURL}), 
                backgroundPosition: 'center', 
                backgroundSize: 'cover'
            }, {...stylesFromParent } ]}>Golden Bridge</CardTitle>

//我刚刚添加了本地样式和样式，这些样式已从父项作为道具发送到此组件。

///我认为管理父组件中的样式并执行一些逻辑以将哪种样式设置为哪张卡可以解决此问题。

//例如在const中保存样式

const greenCardStyle = {
    color: orange,
    fontWeight: 600
}

//，然后决定采用哪种样式放置在由父组件管理的哪张卡片上。

希望这会有所帮助。

保持祝福

Answer 2

我试图解释/建议的“预处理”示例。

const cardData = [
  {
    title: 'Golden Bridge',
    description: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis distinctio esse qui eos, ad provident,'
  },
  {
    title: 'card title 2',
    description: 'description 2'
  },
  {
    title: 'card title 3',
    description: 'description 3'
  },
];

componentDidMount() {
  fetch("https://pixabay.com/api/?key=11095386-871fd43c33a92700d9bffb82d&q=travel&image_type=photo&pretty=true")
  .then(res => res.json())
  .then(results => {
    // do preprocessing here
    const cards = results.hits.reduce((cards, hit, index) => {
      cards.push({
        ...cardData[index % cardData.length], // no index out of bounds
        image: hit.largeImageURL
      });
      return cards;
    }, []);
    this.setState({
      cards
    });
  })
  .catch(error => {
    this.setState({
      isLoaded: true,
      error
    });
  });
}

const renderCard = ({image, title, description}) => (
  <Card className="api" shadow={5} style={{ minWidth: '450', margin: 'auto' }}>
    <a href="/alleblogs">
      <CardTitle
        style={{
          color: '#fff', 
          height: '176px', 
          backgroundImage: url(${image}), 
          backgroundPosition: 'center', 
          backgroundSize: 'cover'
        }}
      >
        {title}
      </CardTitle>
      <CardText>{description}</CardText>
      <CardActions border>
        <Button style={{ color: '#8dd5e8' }}>Likes:</Button>
        <Button style={{ color: '#8dd5e8' }}>Share</Button>
      </CardActions>
    </a>
  </Card>
);

render() {
  const { cards } = this.state;
  return (
    /* ... other code stuffs */
    {
      cards && cards.map(this.renderCard);
    }
    /* ... more code stuffs */
  );
}

给每个元素一个不同的文本（循环，数组）React js

2 个答案: