Question

在我的应用程序中，我需要通过react将相同的数据渲染到多个位置。因此，我不想使用id（通过下面的代码）呈现它，而是要使用class标记。

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
    });
}

Answer 1

$('.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>

Answer 2

这是您的版本的答案。

https://codesandbox.io/s/hopeful-payne-1tloe?fontsize=14

与@Alona的答案相同。我尝试使用问题描述的jQuery-> $('.app')。

function App({index}) {
  return `<div>App - ${index}</div>`;
}

$.each($('.app'), (index, app) => ReactDOM.render(<App index={index + 1} />, app))

<html>
  <div class="app" id="app"></div>
  <div class="app"></div>
  <div class="app"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <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>

在类标签内反应渲染而不是id

2 个答案: