Question

我有一个react函数，我传递一个对象数组作为prop。当组件呈现时，该数组嵌套在同名的对象中。

为什么要嵌套？我可以做些什么来强制它回到阵列吗？

以下是代码（以及指向笔（https://codepen.io/bluesixty/pen/PJQKVq?editors=0010）的链接：

const tags = [
      {
        name: 'ios',
        link: '',
      },
      {
        name: 'ANDROID',
        link: '',
      },
      {
        name: 'REACT',
        link: '',
      },
      {
        name: 'javascript',
        link: '',
      },
    ]


const App = tagList => {

    return (
      <div>
        This is a React component!
        <ul>
          {tagList.tagList.map((tag, i) => (
            <li>
              {tag.name}
            </li>
        ))}
        </ul>
      </div>
    );
  }


ReactDOM.render(
    <App tagList={tags}/>,
  document.getElementById('root')
);

删除.map中的第二个tagList失败，'tagList.map不是函数'。这是真的，现在是一个对象????

{tagList.map((tag, i) => (

Answer 1

功能组件接收ON (Table1.Col1 = Table2.Col1 or Table1.Col1 is NULL and Table2.Col1 is NULL)作为第一个参数，因此正确的代码是：

props

它也可以这样写：

const App = props => {

    return (
      <div>
        This is a React component!
        <ul>
          {props.tagList.map((tag, i) => (
            <li>
              {tag.name}
            </li>
        ))}
        </ul>
      </div>
    );
  }

Answer 2

您的第一个问题：

为什么要嵌套？

将数据传递到任何React组件时，都将其作为“ props”传递。在您的情况下，您要传递的数据是填充了对象的tags数组。

定义App组件的函数以props作为其参数。将参数传递给它时，会将其作为对象参数传递，即props是包含传递给组件的props的 object 。

这就是为什么如果您有一个普通变量：

let greeting = 'Hello World'

并通过它作为道具：

<App content={greeting}/>

道具对象看起来像这样：

props = {
   greeting: 'Hello World'
}

，您将在App组件功能中按如下方式访问它：

{props.content}

作为参数传递的变量又是该函数的对象参数。

您的第二个问题：

我可以做些什么将其强制返回数组吗？

是的，可以。在应用程序组件内：

 const tags = [];
  Object.keys(props).forEach(function(prop) {
    tags.push(...props[prop]);
  });

  console.log(tags); // now an array with your tags

但是，您不需要。您可以使用上面答案中提到的props.tagList。

希望可以为其他人清除。

当作为prop传递给SFC时，React Array转换为object

2 个答案: