Question

当将 React 数组作为 prop 传递给 SFC 时，它会转换为对象

2017-10-06

4333

reactjs

我有一个 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

函数式组件接收 props 作为第一个参数，因此正确的代码是：

const App = props => {

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

也可以这样写：

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

Answer 2

您的第一个问题：

Why is it being nested?

当您将数据传递给任何 React 组件时，您将其作为“props”传递。在您的例子中，您想要传递的数据是填充了对象的 tags 数组。

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

这就是为什么如果你有一个简单的变量：

let greeting = 'Hello World'

并将其作为 props 传递：

<App content={greeting}/>

props 对象将如下所示：

props = {
   greeting: 'Hello World'
}

并且你可以在 App 组件函数中按如下方式访问它：

{props.content}

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

你的第二个问题：

And can I do something to coerce it back to an array?

是的，你可以。在 App 组件内：

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

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

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

希望这能为其他人澄清。