如何将变量传递给Material ui Component的HTML标记？

Question

我正在使用以下材料ui组件：

<CardTitle children={child} />

现在我想添加一些包含变量的HTML代码，该变量将根据我的反应组件的状态而改变

...
render() {
  const child = (<p>this.state.var</p>);

  return (
    ...
    <CardTitle children={child} />
    ...
  );
}
...

}

如何实现这一目标？

我是否必须创建另一个组件，我将其包含为HTML标记？

Answer 1

检查此jsfiddle，我们可以在CardTitle中使用html元素： https://jsfiddle.net/cy167jme/

Answer 2

根据版本4 CardHeader中的文档，标题字段的类型为node。因此，您可以使用例如

<CardHeader title={<div>{addressFrom} &rarr; {addressTo}</div>} />