javascript - 在类标签内 react 渲染而不是 id-6ren

javascript - 在类标签内 react 渲染而不是 id

转载作者：行者123 更新时间：2023-11-30 09:13:35

26

4

在我的应用程序中，我需要通过 React 将相同的数据呈现到多个位置。因此，我不想通过 id(通过下面的代码)呈现它，而是想使用类标签。

ReactDOM.render(<App />, document.getElementById('app')); // Working

ReactDOM.render(<App />, $('.app')); // Not working.

我的 html 如下...

<div class="app" id="app"><div>
<div class="app"><div>
<div class="app"><div>

更新:下面是我的 jsx 文件。

class PList extends React.Component {
    static defaultProps = {
        results: []
    }
    constructor(props) {
        super(props);
        this.state = {
            results: this.props.results
        };
    }
    render() {
        return (
            <ul>
                {
                    this.state.results.map((item, i) => {
                        return <li>{item.Name}</li>
                    })
                }
            </ul>
        );
    }
}

var PRender = ReactDOM.render(<PList />, $('.app'));

function Professionals(data) {
    PRender.setState({
        results: data.Results
    });
}

最佳答案

$('.app') - 这只是一个数组，ReactDOM.render 需要单个元素作为第二个参数。如果你需要渲染多个App，你可以尝试如下方法。

function App({index}) {
  return `<div>App - ${index}</div>`;
}
document.querySelectorAll('.app').forEach((app, index) => ReactDOM.render(<App index={index + 1} />, app));

<html>
  <div id="app">No ID assigned to App</div>
  <div class="app"></div>
  <div class="app"></div>
  <div class="app"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
</html>

关于javascript - 在类标签内 react 渲染而不是 id，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56789532/

26

4

0

文章推荐： java - 获取 JTable 的 JScrollPane

文章推荐： machine-learning - Find-S 的缺点

文章推荐： java - JScrollPane 仅使用水平滚动条显示内容

首页

博学

6Ren·AI

商城

javascript - 在类标签内 react 渲染而不是 id

标签)？
根据 Web 标准，创建带有标题 1 的链接的正确代码是什么？是吗 stackoverflow 或 stackoverflow 谢谢最佳答案根据网络标准，您不能将 block 元素放入内

首页

博学

6Ren·AI

商城

javascript - 在类标签内 react 渲染而不是 id

标签)？ 根据 Web 标准，创建带有标题 1 的链接的正确代码是什么？ 是吗 stackoverflow 或 stackoverflow 谢谢 最佳答案 根据网络标准，您不能将 block 元素放入内

标签)？
根据 Web 标准，创建带有标题 1 的链接的正确代码是什么？是吗 stackoverflow 或 stackoverflow 谢谢最佳答案根据网络标准，您不能将 block 元素放入内