Question

我在使用Materialize-CSS轮播时遇到问题。创建轮播的标准方法是：

<div class="carousel">
<a class="carousel-item" href="#one!"><img 
src="https://lorempixel.com/250/250/nature/1"></a>
<a class="carousel-item" href="#two!"><img 
src="https://lorempixel.com/250/250/nature/2"></a>
<a class="carousel-item" href="#three!"><img 
src="https://lorempixel.com/250/250/nature/3"></a>
</div>

但是我想为名为数组的每个项目创建一个轮播项目因此，“产品”将在JSX中尝试以下代码：

<div className="carousel">

{generalStore.products.map(p =>
<a className="carousel-item"><img src={p.pic} /></a>)}

</div>

p，pic ==图片网址

但这会返回错误：

TypeError: Cannot read property 'clientWidth' of undefined

解决这个问题的蚂蚁想法？谢谢

Answer 1

它也可以在materializeCSS中实现。为此，您需要执行import android.content.Context; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.util.AttributeSet; import android.view.ViewGroup; public class SpanningLinearLayoutManager extends LinearLayoutManager { public SpanningLinearLayoutManager(Context context) { super(context); } public SpanningLinearLayoutManager(Context context, int orientation, boolean reverseLayout) { super(context, orientation, reverseLayout); } public SpanningLinearLayoutManager(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { super(context, attrs, defStyleAttr, defStyleRes); } @Override public RecyclerView.LayoutParams generateDefaultLayoutParams() { return spanLayoutSize(super.generateDefaultLayoutParams()); } @Override public RecyclerView.LayoutParams generateLayoutParams(Context c, AttributeSet attrs) { return spanLayoutSize(super.generateLayoutParams(c, attrs)); } @Override public RecyclerView.LayoutParams generateLayoutParams(ViewGroup.LayoutParams lp) { return spanLayoutSize(super.generateLayoutParams(lp)); } @Override public boolean checkLayoutParams(RecyclerView.LayoutParams lp) { return super.checkLayoutParams(lp); } private RecyclerView.LayoutParams spanLayoutSize(RecyclerView.LayoutParams layoutParams){ if(getOrientation() == HORIZONTAL){ layoutParams.width = (int) Math.round(getHorizontalSpace() / (double) getItemCount()); } else if(getOrientation() == VERTICAL){ layoutParams.height = (int) Math.round(getVerticalSpace() / (double) getItemCount()); } return layoutParams; } @Override public boolean canScrollVertically() { return false; } @Override public boolean canScrollHorizontally() { return false; } private int getHorizontalSpace() { return getWidth() - getPaddingRight() - getPaddingLeft(); } private int getVerticalSpace() { return getHeight() - getPaddingBottom() - getPaddingTop(); } }。之后，您需要在您的组件JS文件中导入materialize-css。

要使用Javascript materialize-css组件，必须在npm install materialize-css@next中对这些组件进行引用，然后才能在componentDidMount()中使用。

CodeSandBox - Working Demo

ref

使用Materialize-CSS和React的TypeError

1 个答案: