尝试将 HTML 元素作为文本传递给反应组件

Question

我正在尝试传递基本上有一个新行来分隔较大句子的文本。我试图通过将其包含在片段中来将其解析为反应元素。我仍然得到 [object][Object] 而不是添加这个换行符。

它基本上是一个语义-ui-react 加载程序，我将文本传递给它。

我在代码的某处设置状态然后调用组件

沙盒：https://codesandbox.io/s/semantic-ui-example-y8e38?file=/example.js

//Setting the state
this.setState({ text: `You will be redirected , and you may need to login.${<><br/></>} .Please read the conditions`});

 //Calling the component
 <MyComp
          message={text}

 />

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

有人可以帮我吗？

Answer 1

除非使用dangerouslySetInnerHTML

，否则无法直接呈现作为字符串传递给反应组件的HTML

//Setting the state
this.setState({ text: `You will be redirected , and you may need to login.<br/>.Please read the conditions`});

 //Calling the component
 <MyComp
          message={text}
 />

 //Called Component
  const MyComp: React.FunctionComponent<IProps> = props => {
    return (
       <>
        <Loader><p dangerouslySetInnerHTML={{__html: props.message}}/></Loader>
       </>   
    );
};

然而，不鼓励使用 dangerouslySetInnerHTML，处理此类情况的最佳方法是将 html 作为子级传递并有条件地启用它

//Setting the state
this.setState({ showText: true});

 //Calling the component
 <MyComp>
      {this.state.showText? <span>You will be redirected , and you may need to login. <br/> .Please read the conditions</span>: null}
 </MyComp>

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

Working demo

Answer 2

根据您的代码，您正在传递一个名为：消息的道具，其中包含您要在加载程序中显示的文本。

在您的代码中，这将是：

//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>

这是添加由 <br/>

分隔的消息

我相信你能想出一些更好的变量名:)

Answer 3

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

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

尝试将 HTML 元素作为文本传递给反应组件

Trying to pass a HTML element to a react component as a text

javascript

setstate

reactjs