Question

我有一个名为<Currency />的反应组件，它采用货币和价值。

所以如果我<Currency value={10} currency={"USD"}/>，它会返回<span>$10.00</span>

然后我在一个单独的组件中使用它。

    if (amount < limit){

        let value  = <Currency value={this.state.depositLimit} currency={this.state.currency} />;

        return this.setState({
            error:`Minimum limit is ${value}`
        });

    }

这会在屏幕上呈现Minimum deposit is [object Object]。有谁知道如何才能显示组件的内容，即$10.00

Answer 1

我会避免在渲染函数之外使用JSX。此外，避免在组件状态中放入太多信息。我建议存储错误的性质，不一定是错误消息本身。

this.setState({
  minDepositError: true,
});

相反，请使用render函数拼出错误消息。

if (this.state.minDepositError) {
  return (
    <div>
      <span>Minimum limit is </span>
      <Currency
        currency={this.state.currency}
        value={this.state.depositLimit}
      />
    </div>
  );
}

Answer 2

ReactServer renderToString就是您想要的。

ReactDOMServer.renderToString(value)

仅显示反应组件的html内容

2 个答案: