Question

我有一个矩阵组件，其中包含2d个元素列表，我想将它们呈现在一个表中，每个按钮都作为按钮。因此，当我的代码是这样时，它可以正常工作：

{Object(
     e.map(f => {
     return (
     <td>
         <button> {0} </button>
     </td>
     );
    })
 )}

但是，当我尝试在不同的组件中渲染相同的输出时，它不起作用，并且没有任何渲染：

{Object(
      e.map(f => {
      return (
      <td>
        <matrixElement/>
       </td>
       );
      })
   )}

class matrixElement extends Component {
  render() {
    return <button> {0} </button>;
  }
}

为什么这行不通？

Answer 1

请记住，这是JSX，无论您返回的是什么，都将转换为React.createElement(...)。现在，在第一个示例中，您使用的是小写字母元素，这意味着React.createElement将尝试将其解释为内置元素（HTML元素），例如<div>，<span>，{{1 }} ...

在第二个示例中，您尝试呈现<button>，这意味着<matrixElement>会尝试将其解释为HTML元素而不是Component，因此您要做的是始终将您的组件命名为大写React.createElement()。

tldr; React组件应始终为大写。

You can read more about JSX here

在React中的其他组件中渲染组件

1 个答案: