我想要渲染 <Child />
的相同组件实例两次 <Parent />
组件。
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>
)
}
可以吗?
最佳答案
您将组件视为值。只需更改您的parent.js,如下所示。
import React from 'react';
import Child from './Child';
export default () => {
return (
<div>
<Child/>
<Child/>
<div/>
)
}
关于javascript - 同一组件渲染两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55861794/