Question

当我尝试根据反应条件仅生成特定组件时，出现意外的令牌错误。我在map函数内使用了一个arrow函数来检查是否有任何元素满足条件（该元素应为1才能显示）。

我尝试将<{section} />和null放在括号中，但我不认为这是问题所在。这是我的代码：

import One from './components/One';
import Two from './components/Two';
import Three from './components/Three';

class App extends React.Component {
  constructor(props) {
    this.state = {
      section_to_show: {
        'One': 1,
        'Two': 0,
        'Three': 0,
      },
    };
  }
  render() {
    ...
    const section_renders = Object.keys(this.state.section_to_show).map(
      section => (
        this.state.section_to_show[section] ? <{section} /> : null
      )
    );
    return (
        ...
        {section_renders}
        ...
    );
   }
};

我在做什么错？我似乎无法弄清楚。

Answer 1

我怀疑您想这样做：

import React from "react";
import ReactDOM from "react-dom";

const One = () => <div>1</div>;
const Two = () => <div>2</div>;
const Three = () => <div>3</div>;

class App extends React.Component {
  state = {
    section_to_show: {
      One: <One />,
      Two: <Two />,
      Three: <Three />
    }
  };
  render() {
    const section_renders = ["One", "Two", "Three"].map(section =>
      this.state.section_to_show[section]
        ? this.state.section_to_show[section]
        : null
    );
    return <div>{section_renders}</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

您的代码：<{section} />无效，因为您试图在片段中插入内容，而不是在片段周围包裹片段标签<>{content} </>

示例代码和框：https://codesandbox.io/embed/react-component-7mvbk

Answer 2

好吧，我明白了您要达到的目标，首先，地图返回一个数组，并且组件名称以大写字母开头，这是jsx区分html元素和对组件进行反应的方式所以这是解决方案

const section_renders = ['One', 'Two'].map(
  section => {
     return (
      this.state.section_to_show[section] ? this.state.section_to_show[section] : null 
      )
  }
);
return (

    <div>{section_renders.map(section => {
      if(section) {
        const Comp = section;
        return <Comp />
      } else {
        return null
      }
    })}</div>

);

您的状态对象应如下图所示

state = {
section_to_show: {
  One,
}
}

如果您仍然遇到问题，为了方便起见，我创建了Sandbox

另一件事，如果您的数组具有像['one']这样的小字母，则可以轻松地将其映射到对象，但我希望这不太困难

希望有帮助

尝试生成动态组件时出现意外的令牌，预期为“”

2 个答案: