Javascript 意外的标记，应为“&引用；尝试生成动态组件时

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

我试着把

和

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}
        ...
    );
   }
};

从“/components/One”导入一个；
从“./components/Two”导入两个；
从“./components/Three”导入三个；
类应用程序扩展了React.Component{
建造师（道具）{
此.state={
节至节显示：{
"一":一,，
“两个”：0，
“三”：0，
},
};
}
render（）{
...
const section_renders=Object.keys（this.state.section_to_show）.map(
节=>(
this.state.section_to_show[section]？：null
)
);
返回(
...
{section_renders}
...
);
}
};

---

我做错了什么？我只是想不通。我猜你想做：

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"));

从“React”导入React；
从“react dom”导入react dom；
常数一=（）=>1；
常数二=（）=>2；
常数三=（）=>3；
类应用程序扩展了React.Component{
状态={
节至节显示：{
一:,，
二:,，
三:
}
};
render（）{
const section_呈现=[“一”、“二”、“三”]。映射（section=>
此.state.section_to_show[section]
？此.状态.段至段显示[段]
：null
);
返回{section_renders}；
}
}
ReactDOM.render（
我怀疑您要执行以下操作：

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"));


从“React”导入React；
从“react dom”导入react dom；
常数一=（）=>1；
常数二=（）=>2；
常数三=（）=>3；
类应用程序扩展了React.Component{
状态={
节至节显示：{
一:,，
二:,，
三:
}
};
render（）{
const section_呈现=[“一”、“二”、“三”]。映射（section=>
此.state.section_to_show[section]
？此.状态.段至段显示[段]
：null
);
返回{section_renders}；
}
}
ReactDOM.render（
好的，我知道你想要实现什么，
首先，map返回一个数组，组件名以大写字母开头，这就是jsx如何区分html元素和react组件
这就是解决办法

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>

);

如果您仍然有一些问题，我已经为您创建了一个方便

还有一件事，如果你的数组有像['one'这样的小字母，你可以很容易地将它映射到一个对象，但我希望这不会太难

希望对你有所帮助好的，我知道你想要实现什么，
首先，map返回一个数组，组件名以大写字母开头，这就是jsx如何区分html元素和react组件
这就是解决办法

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>

);

如果您仍然有一些问题，我已经为您创建了一个方便

还有一件事，如果你的数组有像['one'这样的小字母，你可以很容易地将它映射到一个对象，但我希望这不会太难

希望它能有所帮助
请将您的代码放在codepen或codesandbox中，以便人们提供帮助。我认为您不能插入像
这样的组件名称，您应该使用if-else/switch来有条件地渲染。section=>（）应该有大括号，而不是圆括号。@muka.gergely不，圆括号用于返回一个对象，如果state暗示它，则返回组件，或者为所有其他组件返回null。组件在哪里，
1、2、3
？请将您的代码放在codepen或codesandbox中，以便人们提供帮助。我认为您无法插入组件如
，应使用if-else/switch有条件地呈现。section=>（）应该有大括号，而不是圆括号。@muka.gergely否，圆括号用于返回一个对象，如果state暗示它，则返回该组件，或者为所有其他组件返回null。组件在哪里，
1、2、3
？我正试图根据section\u to\u show object的值显示组件。还有其他名为'我希望有条件地显示的“一”、“二”和“三”。
这个.state.section\u to\u show
的值是什么样的？
section\u to\u show
用于确定要显示的组件，我添加了另一个类似于您的对象（即
'one'：one，
）但是它没有显示任何内容：
this.state.section_to_show[section]？{this.state.sections[section]}:null
非常感谢，您最近的编辑修复了我的问题：）我没有在对组件的引用周围添加。我正在尝试根据section\u to\u show object的值显示组件。还有其他名为“一”、“二”和“三”的组件，我希望有条件地显示。该状态的值是什么。section\u to\u show
看起来像什么？section\u to\u show

是f或者为了确定要显示的组件，我添加了另一个与您类似的对象（即，

'One'：One，

），但结果是什么也没有显示：

this.state.section_to_show[section]？{this.state.sections[section]}:null

非常感谢，您最近的编辑修复了我的问题：）我没有在组件的引用周围添加。