Question

我尝试渲染动态命名的React组件。我理解JSX要求变量名称大写。但是，当我映射我的状态并尝试填充组件时，我收到以下错误：

Warning: <TextBlock /> is using uppercase HTML. Always use lowercase HTML tags in React.

我理解这一点，如果我不使用地图并直接在主类的渲染中输入，大写似乎在子TextBlock中有效。

主要课程：

import React from 'react';
import TextBlock from './Components/TextBlock';

class RenderView extends React.Component {
  constructor() {
    super();

    this.state = {
      blurbs: [
        {
          value: "Text value",
          tag: "h2",
          component: 'TextBlock'
        },
        {
          value: "lorem stuff adnfsaldkfn asdfl lkjasdflkj asdlfk  alskdjflaksdjf ",
          tag: "p",
          component: 'TextBlock'
        }
      ]
    }
  }

  render() {

    const componentArray = this.state.blurbs.map((blurb, index) => {
      const Tag = blurb.component;
      return <Tag obj={blurb} key={index} />;
    })

    return componentArray;
  }
}

子组件TextBlock：

import React from 'react';

export default function TextBox(props) {

  const Tag = props.obj.tag;

  const Output = <Tag>{props.obj.value}</Tag>

  return Output;
}

检查反应铬工具，它似乎呈现为html元素。如何识别这两个模糊是jsx元素？

Answer 1

我不确定你需要它是多么动态（如果它必须是一个字符串，或者它总是可以作为一个反应组件的引用），但如果你直接使用组件引用它应该工作字符串：

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier, for: indexPath) as! ArtistTableViewCell
    let artist = artists[indexPath.row]
    cell.artist = artist        

    return cell
}

如果您确实需要使用字符串，那么您可以将组件添加到地图并以这种方式呈现：

this.state = {
  blurbs: [
    {
      value: "Text value",
      tag: "h2",
      component: TextBlock
    },

-

const COMPONENTS = {
  TextBlock,
  // etc..
};

动态创建的React组件甚至使用大写形式呈现为HTML

1 个答案: