Question

我可以声明一个组件数组吗？并返回某些组件...... 这可能吗？？

ES6：

import React from 'react';
import Component1 from './Component1';
import Component2 from './Component2';</br>

export default App extends React.Component {
  render() {
     const myComponents = [`<Component1 />`,`<Component2 />`];

     return (
       {myComponents.map((component, index) => {
         return component[index] === index;
       })}
    );
  }
}

建议请...非常感谢

Answer 1

当然可以将它们存储在一个数组中。请记住，JSX只是常规Javascript的语法糖 - 它不是魔术，它不是字符串，所以不需要引用它。

const myComponents = [<Component1 />, <Component2 />];

上面的JSX只是一种较短的写法：

var myComponents = [
  React.createElement(Component1, null),
  React.createElement(Component2, null)
];

你在渲染中返回的值会给你带来问题。

mycomponents.map((component, index) => {
  // this will always return false
  // because objects are not numbers
  return component[index] === index;
});

对map的调用总是会返回一个false值数组。如果你试图渲染它们会抛出错误。

相反，您可以只渲染整个组件数组。

return (
  <div>{ myComponents }</div>
);

在ReactJS中，我可以声明一个组件数组吗？并返回某些组件

1 个答案: