JSX-如何从2个变量连接代码？

Question

假设我有以下两个变量：

const test1 = (<div> ..... </div>);
const test2 = (<div> ..... </div>);

我如何将它们组合在一起（意思是-test1的代码，然后是test2的代码），合并成一个称为test3的“有效”变量，然后将其呈现为： / p>

{this.array.length !== 0 ? test3 : null}

？

Answer 1

如果您使用的是React 16.2+，请使用Fragment：

{this.array.length !== 0 ? <React.Fragment>{test1}{test2}</React.Fragment> : null}

Answer 2

您可以将React Fragment与短路语法结合使用，以使其简短而甜美。

render() {
  const test3 = <React.Fragment>{test1}{test2}</React.Fragment>;
  return (this.array.length && test3);
}

Answer 3

如果您使用的是最新版本的React，则可以通过使它更短来实现。不必键入React.Fragment;）的缩写是<>和

const test3 = {this.array.length !== 0 ? <>{test1}{test2}</> : null }