Question

我导入了该组件，该组件返回一堆纸牌，但我想在行中而不是在列中设置样式，看来这样做的方法是将组件循环为<li>，然后添加css，但我似乎无法使组件正确循环。

该组件在父元素中看起来像这样：

<div id="newsFeed" className='feed'>
<Feed theme={this.state.theme} articles = {this.state.articles} />
  </div>

我尝试了以下解决方案：

var feedContent = <Feed theme={this.state.theme} articles = {this.state.articles} />
///////////////////////
{feedContent.map(item => <Feed key={item} value={item} />)}
    </div>

但似乎找不到运气。

任何帮助将不胜感激

Answer 1

map是一个内置的数组方法，在React中使用了一堆。您需要在数组上使用它，否则将引发错误。我假设articles的值是一个数组：

//Feed component
class Feed extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      articles = [] 
    };
  }

  componentDidMount = () => { // maybe call an API to populate the articles array }

  render = () => {
    return (
      <ul className="someClass" >
        {this.state.articles.map((item, index) => <li key={index} className="someOtherClass">{item}</li>)}
      </ul>
    );
  }

}

或者，您可以创建一个li组件（也许称为FeedItem），将其导入并使用articles数组中每个项目的值prop映射它。

// render method for Feed Component
render = () => {
  return(
    <ul className="someClass">
      {this.state.articles.map((item, index) => <FeedItem key={index} value={item} />)}
    </ul>
  );
}

// FeedItem component
const FeedItem = ({value}) => {
  return(
    <li className="someOtherClass">{value}</li>
  );
}

因此，您正在使用map创建一个包含您的articles数组中的项目的列表，并且map函数循环遍历每个文章并返回一个list组件。希望这会有所帮助！这是供参考的React文档：https://reactjs.org/docs/lists-and-keys.html

注意：React文档建议不要使用索引作为键，但是我不知道您的文章数组元素是否包含唯一的内容。如果确实这样做（例如某种ID），请使用该标识符代替索引。

Answer 2

我认为您需要更改方法。

我建议您创建一个Article组件，例如：

function Article({ title }) {
  <div>
    {title}
  <div>
}

在那之后，您可以使用articles数组显示每一个：

//Feed component
this.state.articles.map((article, i) => <Article title={article.title}>)

通过这种方式，您可以根据需要对文章组件进行样式化。

Answer 3

我可以用简单的CSS弄清楚它是否相信。基本上<Feed />被包装在父组件的div中，并且没有响应Flexbox CSS代码，但是，在我使用了div之后，将div的className更改为将其包裹在其<div>中div响应CSS自己的文件！非常感谢大家的帮助，谢谢！

Answer 4

您是否尝试过将className添加到作为卡片父级的div中？例如，使用该类来应用弹性显示，然后看看能给您带来什么。如果Newscard偶然有100％的固定宽度，那么您当然需要将其调整为较小的百分比/宽度以适合您的需求。

在其父组件内部循环一个ReactJS组件

4 个答案: