diff --git a/packages/inula-next/test/props.test.tsx b/packages/inula-next/test/props.test.tsx
index 879239195229a239b19e2c733ef824b3acc089f5..a04a0cbc6643aa532e02e31eb86ce2db6f8db6ca 100644
--- a/packages/inula-next/test/props.test.tsx
+++ b/packages/inula-next/test/props.test.tsx
@@ -195,7 +195,7 @@ describe('extended prop tests', () => {
       `);
   });
 
-  it.fails('should correctly pass and render array props', ({ container }) => {
+  it('should correctly pass and render array props', ({ container }) => {
     function Child({ items }) {
       return (
         <ul>
@@ -212,21 +212,33 @@ describe('extended prop tests', () => {
 
     render(App, container);
     expect(container).toMatchInlineSnapshot(`
-        <div>
-          <ul>
-            <li>Apple</li>
-            <li>Banana</li>
-            <li>Cherry</li>
-          </ul>
-        </div>
-      `);
+      <div>
+        <ul>
+          <li
+            key="0"
+          >
+            Apple
+          </li>
+          <li
+            key="1"
+          >
+            Banana
+          </li>
+          <li
+            key="2"
+          >
+            Cherry
+          </li>
+        </ul>
+      </div>
+    `);
   });
 
-  it.fails('should correctly pass and render object props', ({ container }) => {
+  it('should correctly pass and render object props', ({ container }) => {
     function Child({ person }) {
       return (
         <div>
-          {person.name}, {person.age}
+          {person.name},{person.age}
         </div>
       );
     }
@@ -237,12 +249,14 @@ describe('extended prop tests', () => {
 
     render(App, container);
     expect(container).toMatchInlineSnapshot(`
+      <div>
         <div>
-          <div>
-            Alice, 30
-          </div>
+          Alice
+          ,
+          30
         </div>
-      `);
+      </div>
+    `);
   });
 
   it('should correctly handle default prop values', ({ container }) => {
@@ -288,6 +302,25 @@ describe('extended prop tests', () => {
       `);
   });
 
+  it('should support member prop', ({ container }) => {
+    function Child(props) {
+      return <div>{props.a}</div>;
+    }
+
+    function App() {
+      return <Child a="Hello" />;
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <div>
+            Hello
+          </div>
+        </div>
+      `);
+  });
+
   it.fails('should handle props without values', ({ container }) => {
     function Child({ isDisabled }) {
       return <button disabled={isDisabled}>Click me</button>;
diff --git a/packages/inula-next/test/rendering.test.tsx b/packages/inula-next/test/rendering.test.tsx
index 7e047ec5393af5f9ea8c2bd39ce17c1a1795b6f2..59b1348156eae44aeea0b41acb7df289024ba072 100644
--- a/packages/inula-next/test/rendering.test.tsx
+++ b/packages/inula-next/test/rendering.test.tsx
@@ -61,7 +61,7 @@ describe('rendering', () => {
             Header
             <h1>hello world!!!</h1>
             <section>
-              <button>Add, Now is {count}</button>
+              <button>Add, Now is{count}</button>
             </section>
             Footer
           </div>
diff --git a/packages/transpiler/babel-inula-next-core/src/sugarPlugins/propsFormatPlugin.ts b/packages/transpiler/babel-inula-next-core/src/sugarPlugins/propsFormatPlugin.ts
index 83f1b6db6c35feb1fd486387ac49d05062e36821..262531c5d2d42ac88013b83ac8d6f3b49c9e9b6f 100644
--- a/packages/transpiler/babel-inula-next-core/src/sugarPlugins/propsFormatPlugin.ts
+++ b/packages/transpiler/babel-inula-next-core/src/sugarPlugins/propsFormatPlugin.ts
@@ -92,12 +92,66 @@ function extractPropsDestructingInFnBody(
   return props;
 }
 
+function extractMemberExpressionInFnBody(
+  fnPath: NodePath<t.FunctionExpression> | NodePath<ArrowFunctionWithBlock>,
+  propsName: string
+) {
+  const props: Prop[] = [];
+  const body = fnPath.get('body') as NodePath<t.BlockStatement>;
+  body.traverse({
+    MemberExpression(path: NodePath<t.MemberExpression>) {
+      // find the props destructuring, like const { prop1, prop2 } = props;
+      const obj = path.node.object;
+
+      if (t.isIdentifier(obj) && obj.name === propsName) {
+        const property = path.node.property;
+        if (!t.isIdentifier(property)) {
+          return;
+        }
+        const name = property.name;
+        const prop: Prop = { type: PropType.SINGLE, name };
+        if (path.parentPath.isVariableDeclarator() && t.isIdentifier(path.parentPath.node.id)) {
+          const rename = path.parentPath.node.id.name;
+          if (name !== rename) {
+            prop.alias = rename;
+          }
+          path.parentPath.remove();
+        }
+        if (!props.map(prop => prop.name).includes(prop.name)) {
+          props.push(prop);
+        }
+      }
+    },
+  });
+  return props;
+}
+
+function replaceProps(
+  fnPath: NodePath<t.FunctionExpression> | NodePath<ArrowFunctionWithBlock>,
+  propsName: string,
+  props: Prop[]
+) {
+  const body = fnPath.get('body') as NodePath<t.BlockStatement>;
+  props.forEach(prop => {
+    body.traverse({
+      MemberExpression(path: NodePath<t.MemberExpression>) {
+        const obj = path.node.object;
+        const property = path.node.property;
+        if (t.isIdentifier(property) && t.isIdentifier(obj) && obj.name === propsName && property.name === prop.name) {
+          path.replaceWith(t.identifier(prop.name + PROP_SUFFIX));
+        }
+      },
+    });
+  });
+}
+
 function transformParam(
   propsPath: NodePath<t.Identifier | t.RestElement | t.Pattern>,
   props: Prop[],
   fnPath: NodePath<t.FunctionExpression> | NodePath<ArrowFunctionWithBlock>,
   suffix: string
 ) {
+  let memberExpressionProps: Prop[] = [];
   if (propsPath) {
     if (propsPath.isObjectPattern()) {
       // --- object destructuring ---
@@ -105,11 +159,15 @@ function transformParam(
     } else if (propsPath.isIdentifier()) {
       // --- identifier destructuring ---
       props = extractPropsDestructingInFnBody(fnPath, propsPath.node.name);
+      memberExpressionProps = extractMemberExpressionInFnBody(fnPath, propsPath.node.name);
+      props = [...props, ...memberExpressionProps];
     }
   }
 
   fnPath.node.body.body.unshift(...props.flatMap(prop => createPropAssignment(prop, fnPath.scope, suffix)));
-
+  if (propsPath.isIdentifier()) {
+    replaceProps(fnPath, propsPath.node.name, memberExpressionProps);
+  }
   // --- only keep the first level props---
   // e.g. function({ prop1, prop2 }) {}
   const param = t.objectPattern(
diff --git a/packages/transpiler/babel-inula-next-core/test/sugarPlugins/props.test.ts b/packages/transpiler/babel-inula-next-core/test/sugarPlugins/props.test.ts
index e3d127c08f70b09e5f8cb21fb39237f5813c14bc..6256607ededea21c5e392bbb2e8754fd059a3864 100644
--- a/packages/transpiler/babel-inula-next-core/test/sugarPlugins/props.test.ts
+++ b/packages/transpiler/babel-inula-next-core/test/sugarPlugins/props.test.ts
@@ -190,5 +190,38 @@ describe('analyze props', () => {
         });"
       `);
     });
+
+    it('should support props member expression', () => {
+      expect(
+        mock(/*js*/ `
+        Component((props) => {
+          const foo = props.foo;
+        })
+      `)
+      ).toMatchInlineSnapshot(`
+        "Component(({
+          foo
+        }) => {
+          let foo_$p$_ = foo;
+        });"
+      `);
+    });
+    it('should support props member expression rename', () => {
+      expect(
+        mock(/*js*/ `
+        Component((props) => {
+          const renamed = props.foo
+          return props.foo;
+        })
+      `)
+      ).toMatchInlineSnapshot(`
+        "Component(({
+          foo
+        }) => {
+          let foo_$p$_ = foo;
+          let renamed = foo_$p$_;
+        });"
+      `);
+    });
   });
 });
diff --git a/packages/transpiler/view-generator/src/NodeGenerators/ForGenerator.ts b/packages/transpiler/view-generator/src/NodeGenerators/ForGenerator.ts
index 936b6174da73a9064a48d5ee7c93ae031d6eda41..ae198ec4a5773e52a2ad47aefc9299633a027f12 100644
--- a/packages/transpiler/view-generator/src/NodeGenerators/ForGenerator.ts
+++ b/packages/transpiler/view-generator/src/NodeGenerators/ForGenerator.ts
@@ -70,7 +70,7 @@ export default class ForGenerator extends BaseGenerator {
         this.t.newExpression(this.t.identifier(this.importMap.ForNode), [
           array,
           this.t.numericLiteral(depNum),
-          this.getForKeyStatement(array, item, key),
+          this.getForKeyStatement(array, item, key, index),
           this.t.arrowFunctionExpression(
             [item as any, idxId, this.t.identifier('$updateArr')],
             this.t.blockStatement(childStatements)
@@ -82,13 +82,22 @@ export default class ForGenerator extends BaseGenerator {
 
   /**
    * @View
-   * ${array}.map(${item} => ${key})
+   * ${array}.map(${item, index} => ${key})
    */
-  private getForKeyStatement(array: t.Expression, item: t.LVal, key: t.Expression): t.Expression {
+  private getForKeyStatement(
+    array: t.Expression,
+    item: t.LVal,
+    key: t.Expression,
+    index: t.Identifier | null
+  ): t.Expression {
+    const params = [item as any];
+    if (index) {
+      params.push(index);
+    }
     return this.t.isNullLiteral(key)
       ? key
       : this.t.callExpression(this.t.memberExpression(array, this.t.identifier('map')), [
-          this.t.arrowFunctionExpression([item as any], key),
+          this.t.arrowFunctionExpression(params, key),
         ]);
   }