Question

说我想做像

这样的事情

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:scrollbars="vertical"
        android:weightSum="100">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/background_light"
            android:elevation="0dp"
            android:minHeight="?attr/actionBarSize"
            android:theme="?attr/actionBarTheme"
            app:popupTheme="?android:attr/homeAsUpIndicator" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dip"
            android:layout_weight="90"
            android:orientation="vertical"
            android:padding="50dip">

            <android.support.v4.view.ViewPager
                android:id="@+id/product_sheet_viewpager"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

        </LinearLayout>

        <TextView
            android:id="@+id/product_sheet_description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="bbb" />

        <TextView
            android:id="@+id/product_sheet_color"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Color: Yellow" />

        <TextView
            android:id="@+id/product_sheet_reference"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Ref: 2049/889/300" />

    </LinearLayout>
</android.support.v4.widget.NestedScrollView>

显然这不起作用。我可以做一些像

这样的事情

const MyElement = (props) => (
    <ul>
        <li>First</li>
        {condition ? <li>Thing 1</li><li>Thing 2</li> : null}
        <li>Second</li>
    </ul>
)

或

const MyElement = (props) => (
    <ul>
        <li>First</li>
        {condition ? <li>Thing 1</li> : null}
        {condition ? <li>Thing 2</li> : null}
        <li>Second</li>
    </ul>
)

是否有更清洁或推荐的方法来做这样的事情？

Answer 1

您也可以使用array这样写。如果条件为array，请将ui项目存储在return和array true，如下所示：

{1 == 1 ? [<li>Thing 1</li>, <li>Thing 2</li>] : null}

我认为，最佳方式是使用map并创建所有li项，如下所示：

let b = [1,2,3].map(el => <li key={el}> {el} </li>)

然后render就像这样：

{1 == 1 ? b : null}

检查此示例：

const MyElement = () => {

    let a = [<li>Thing 1</li>, <li>Thing 2</li>];
    
    let b = [1,2,3].map(el=> <li key={el}> {el} </li>)
    
    return (
       <ul>
           <li>First</li>
        
           {1==1 ? a : null}
           
           {1==1 ? b : null}
        
           {1==1 ? [<li>Thing 1</li>, <li>Thing 2</li>] : null} 
       
           <li>Second</li>
      </ul>
   )
}

ReactDOM.render(<MyElement/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

Answer 2

后一个例子通常很好，但在这种情况下不是因为<ul>不能有<span>个孩子。这是无效的HTML。

最好的选择是返回一个数组，但看起来像 Mayank Shukla 已经覆盖了:)所以这里有一些其他的选择：

我的第二个例子没有问题。当然你必须两次评估这个条件，但这很好，除非它是一个复杂的条件。如果它很复杂，你可以稍微简化一下：

const Demo = (props) => {
  let myVar = true; //some complex evaluation
  return (
    <ul>
      <li>First</li>
      {myVar ? <li>Thing 1</li> : null}
      {myVar ? <li>Thing 2</li> : null}
      <li>Second</li>
    </ul>
  );
}

ReactDOM.render(<Demo />, document.getElementById('demo'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='demo' />

现在你只运行一次复杂的条件，只评估一个布尔值（myVar）。

另一种选择是获得2次回报。如果条件为真，则执行第一次返回。否则是最后一次。

const Demo = (props) => {
  if(true) return (
    <ul>
      <li>First</li>
      <li>Thing 1</li>
      <li>Thing 2</li>
      <li>Second</li>
    </ul>
  );
  return (
    <ul>
      <li>First</li>
      <li>Second</li>
    </ul>
  );
}

ReactDOM.render(<Demo />, document.getElementById('demo'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='demo' />

如何在ReactJS中对<li>进行分组

2 个答案: