在其父組件內循環 ReactJS 組件

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 中大量使用。 您需要在數組上使用它，否則會引發錯誤。 我假設文章的值是一個數組：

//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，將其導入並 map 使用文章數組中每個項目的 value 屬性。

// 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 創建包含文章數組中項目的列表，並且 map function 循環遍歷每篇文章並返回列表組件。 希望這會有所幫助：這是供參考的 React 文檔： https://reactjs.org/docs/lists-and-keys.html

注意：React 文檔建議不要使用索引作為鍵，但我不知道您的文章數組元素是否包含獨特的東西。 如果他們這樣做（比如某種 id），請使用它而不是索引。

Answer 2

我認為你需要改變方法。

我建議您創建一個 Article 組件，例如：

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

之后，您可以使用文章數組來顯示每個：

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

通過這種方式，您可以根據需要對文章組件進行樣式化。

Answer 3

不管你信不信，我都能用簡單的 CSS 搞清楚。 基本上<Feed />被包裝在父組件中的 div 中，並且沒有響應 Flexbox CSS 代碼，但是，在我使用更改將組件包裝在其自己的文件中的<div>內的 div 的 className 之后div回復了CSS，非常感謝大家的幫助，不勝感激！

Answer 4

您是否嘗試過將 className 添加到作為卡片父級的 div 中？ 例如，使用 class 來應用柔性顯示，看看它會給你什么。 如果 Newscard 有一個 100% 的固定寬度，當然您需要將其調整為小百分比/寬度以滿足您的需要。