渲染多个小部件 React 组件

Question

我想多次在 html 中呈现小部件。 我有 3 个 id 相同但属性不同的 div，我想在页面上渲染我的反应组件 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>