Na verdade, existem várias maneiras de fazer isso.
Você quer usar JSX dentro de seus adereços
Você pode simplesmente usar {} para fazer com que JSX analise o parâmetro. A única limitação é a mesma para cada elemento JSX: ele deve retornar apenas um elemento raiz.
myProp={<div><SomeComponent>Some String</div>}
A maneira mais legível de fazer isso é criar uma função renderMyProp que retornará componentes JSX (assim como a função de renderização padrão) e, em seguida, simplesmente chamar myProp = {this.renderMyProp ()}
Você quer passar apenas HTML como string
Por padrão, JSX não permite renderizar HTML bruto a partir de valores de string. No entanto, há uma maneira de fazer isso:
myProp="<div>This is some html</div>"
Então, em seu componente, você pode usá-lo assim:
<div dangerouslySetInnerHTML=myProp={{ __html: this.renderMyProp() }}></div>
Esteja ciente de que esta solução 'pode' abrir em ataques de falsificação de script entre sites. Também tome cuidado para que você só possa renderizar HTML simples, nenhuma tag JSX ou componente ou outras coisas sofisticadas.
A forma de array
Em resposta, você pode passar uma matriz de elementos JSX. Que significa:
myProp={["This is html", <span>Some other</span>, "and again some other"]}
Eu não recomendaria esse método porque:
- Isso criará um aviso (chaves ausentes)
- Não é legível
- Não é exatamente o jeito JSX, é mais um hack do que um design pretendido.
O jeito das crianças
Adicionando-o por uma questão de integridade, mas em reação, você também pode obter todos os filhos que estão "dentro" do seu componente.
Então, se eu pegar o seguinte código:
<SomeComponent>
<div>Some content</div>
<div>Some content</div>
</SomeComponent>
Em seguida, os dois divs estarão disponíveis como this.props.children em SomeComponent e podem ser renderizados com a sintaxe {} padrão.
Esta solução é perfeita quando você tem apenas um conteúdo HTML para passar para o seu componente (imagine um componente Popin que leva apenas o conteúdo do Popin como filho).
No entanto, se você tiver vários conteúdos, não pode usar filhos (ou você precisa pelo menos combiná-los com outra solução aqui)