Javascript 试图将HTML元素作为文本传递给react组件

我试图通过一个基本上有新行的文本来分隔一个更大的句子。我试图通过将其包含在片段中，将其解析为react元素。我仍然得到了

[object][object]

，而不是添加这个换行符

它基本上是一个语义ui反应加载器，我将文本传递给它

在代码的某个地方，我设置状态，然后调用组件

沙箱：

//设置状态
this.setState（{text:`您将被重定向，您可能需要登录。${
}。请阅读条件`}）；
//调用组件
//被叫成分
从“语义ui反应”导入{Loader}；
const MyComp:React.FunctionComponent=props=>{
返回(
{props.message}
);
};

---

有人能帮我吗？

除非您使用

---

从代码开始，您正在传递一个名为：message的道具，其中包含要在加载程序中显示的文本

在您的代码中，这将是：

//Setting the state
this.setState(
  { 
     texts: [
        "You will be redirected, and you may need to login.", 
        "Please read the conditions"
     ] 
  });

注意：我已将其更改为文本，因为它现在是一个数组

与前面一样，创建组件的实例：

<MyComp messages={texts} />

通过道具消息传递文本（重命名消息，因为它现在是一个数组）

然后在装入器中，您可以按如下方式拆分行：

<Loader>{messages.map( m => <span>{m}</span><br/>)}</Loader>

{messages.map（m=>{m}
）}

这是添加消息，每个消息由

---

我相信您可以想出一些更好的变量名：）

我认为在下一行中添加一些条件文本更容易

//Setting the state
this.setState({ 
  redirectText: "You will be redirected , and you may need to login.", 
  conditionText: "Please read the conditions"
});

 //Calling the component
 <MyComp
    redirectText={this.state.redirectText}
    conditionText={this.state.conditionText}
 />

 //Called Component
  import { Loader } from "semantic-ui-react";
  const MyComp: React.FunctionComponent<IProps> = props => {
    return (
       <>
        <Loader>
          <div>{props.redirectText}</div>
          <div>{props.conditionText}</div>
        </Loader>
       </>   
    );
};

//设置状态
这个.setState（{
重定向文本：“您将被重定向，您可能需要登录。”，
条件文本：“请阅读条件”
});
//调用组件
//被叫成分
从“语义ui反应”导入{Loader}；
const MyComp:React.FunctionComponent=props=>{
返回(
{props.redirectText}
{props.conditionText}
);
};

这看起来像是代码中的错误：

{props.message}

也许这就是问题所在。应该是：

{props.message}

那么，加载程序看起来像什么呢？？因为这就是你的问题所在…这是加载程序，我正在将文本传递给它，因为文本有点长，所以我尝试添加一个换行符。它显示“您将被重定向，并且您可能需要登录[object]。请阅读条件”Hi@li97，我无法理解该链接显示给我的内容。。。我认为与其尝试将

嵌入到文本中，不如将文本作为行数组传递，然后在加载程序组件中（或文本呈现的位置），您可以将这些行映射到您选择的html行抱歉，我忘了添加，这是一个语义ui react Loader组件，我需要将此文本发送到该组件。这个答案对我来说毫无意义。Loader元素是无效的HTML，您可以在元素中设置文本。@在编辑之前，它是有意义的，因为OP有元素there@ShubhamKhatri您现在已经编辑了它，至少是有效的HTML。@开发人员现在查看正确的编辑。思考总是不需要完全正确的。有时逻辑更重要，我不想将其作为数组传递，可能是作为一行文本传递。这是一种通用的加载器组件，它用单个消息加载微调器，然后您可以在需要时简单地添加一个包装器（HOC）来专门化它，或者您有一条消息和一个消息属性，这样用户就可以传递数组或单个消息。或者甚至测试消息是否是组件中的数组，并执行正确的操作

<MyComp messages={texts} />

<Loader>{messages.map( m => <span>{m}</span><br/>)}</Loader>

//Setting the state
this.setState({ 
  redirectText: "You will be redirected , and you may need to login.", 
  conditionText: "Please read the conditions"
});

 //Calling the component
 <MyComp
    redirectText={this.state.redirectText}
    conditionText={this.state.conditionText}
 />

 //Called Component
  import { Loader } from "semantic-ui-react";
  const MyComp: React.FunctionComponent<IProps> = props => {
    return (
       <>
        <Loader>
          <div>{props.redirectText}</div>
          <div>{props.conditionText}</div>
        </Loader>
       </>   
    );
};