同一组件渲染两次

Question

我想在<Parent />组件中两次渲染同一<Child />组件实例 。

index.js

import React from 'react';
import { render } from 'react-dom';

import Parent from './Parent';

render(
  <Parent />,
  document.getElementById('root')
);

Parent.js

import React from 'react';
import Child from './Child';

const child = <Child />

export default () => {
  return (
    <>
      {child}
      {child}
    </>
  )
}

Child.js

import React, { useState } from 'react';

function generateRandomString() {
  return Math.random().toString();
}

export default () => {
  const [text, setText] = useState(generateRandomString());

  function onClickHandler() {
    setText(generateRandomString());
  }

  return (
    <div onClick={onClickHandler}>text: {text}</div>
  )
}

有可能吗？

Answer 1

您将组件视为价值。 只需按照以下步骤更改您的parent.js。

import React from 'react';
import Child from './Child';
export default () => {
  return (
    <div>
     <Child/>
     <Child/>
    <div/>
 )
}