Question

我想多次用html呈现窗口小部件。我有3个具有相同ID但属性不同的div，我想在页面上渲染我的react组件3次。现在，我只得到第一个组件。

HTML：

<div id="myapp" att="1"></div>
<!-- Something else -->
<div id="myapp" att="2"></div>
<!-- Something else -->
<div id="myapp" att="3"></div>
<script type="text/javascript" src="index.js"></script>

index.js

const container = document.getElementById('myapp');
ReactDOM.render(
 <App
  att={container.getAttribute('att')}
 />,
 container,
);

您有任何建议如何将组件渲染三遍吗？

Answer 1

您的App组件将包含您要呈现的组件。

因此在App.js中，您将拥有类似的内容，您可以使用props

将属性传递给div

const widgetOne = props => (
  <div att={props.attribute}>
    <h1>WidgetTwo</h1>
  </div>
);

const widgetTwo = props => {
  <div att={props.attribute}>
    <h1>WidgetTwo</h1>
  </div>;
};

const widgetThree = () => {
  <div>
    <h1>WidgetThree</h1>
  </div>;
};

function App() {
  return (
    <div className="App">
      <widgetOne att={1} />
      <widgetTwo att={2} />
      <widgetThree />
    </div>
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

您的html会有一个div，App组件可以像<div id="root"></div>那样钩住

渲染多个小部件React组件

1 个答案: