Попытка передать элемент HTML компоненту реакции в виде текста - PullRequest
Новая
       6

Попытка передать элемент HTML компоненту реакции в виде текста

0 голосов
/ 07 мая 2020

Я пытаюсь передать текст с новой строкой, чтобы отделить более крупное предложение. Я пытаюсь разобрать его как элемент реакции, включив его во фрагменты. Тем не менее, я получаю [object][Object] вместо добавления этой новой строки.

Это в основном загрузчик semanti c -ui-react, которому я передаю текст.

Где-то в коде я я устанавливаю состояние, а затем вызываю компонент

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

Кто-нибудь может мне здесь помочь?

Ответы [ 3 ]

1 голос
/ 07 мая 2020

Работая с вашим кодом, вы передаете опору с именем: message, которая содержит текст, который вы хотите отобразить в загрузчике.

в вашем коде это будет: 

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

Примечание: я изменил это на текст (ы), так как теперь это массив ..

Как и раньше, создайте экземпляр вашего компонента: 

<MyComp messages={texts} />

передача текста через prop messages (переименованные сообщения, поскольку теперь это массив)

Затем в загрузчике вы можете разделить строки следующим образом: 

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

это добавляет сообщения, каждое из которых разделено <br/>

Я уверен, что вы можете придумать несколько лучших имен переменных :)

0 голосов
/ 07 мая 2020

Думаю, проще добавить conditionText, который будет в следующей строке 

//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>
       </>   
    );
};
0 голосов
/ 07 мая 2020

HTML, который вы передаете, чтобы реагировать на компонент в виде строки, не может быть визуализирован напрямую, если вы не используете dangerouslySetInnerHTML

//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 не рекомендуется, и лучший способ справиться с таким сценарием ios - передать 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>
       </>   
    );
};

Рабочая демонстрация

...