Question

我想知道是否可以将React组件推送到JavaScript数据表中，例如在下面的代码中，我希望我的ShoppingList组件在我的ShoppingTable中呈现。

class ShoppingList extends React.Component {
confirm() {
    alert('Are you sure?');
}

render() {
    return (
        <div className="shopping-list">
            <h1>Shopping List for {this.props.name}</h1>
            <ul>
                <li onCLick={this.confirm.bind(this)}>Instagram</li>
                <li onCLick={this.confirm.bind(this)}>WhatsApp</li>
                <li onCLick={this.confirm.bind(this)}>Oculus</li>
            </ul>
        </div>
    );
}}

第二部分：

class ShoppingTable extends React.Component {
componentDidMount() { 
    var data = [];
    data.push([
            'firstname',
            'lastname',
            <ShoppingList name={'firstname'}/>
        ])

   var dataTable = $("#" + this.props.itemId).DataTable({
        data: data,
    });
}
render() {
    return (
        <table>
            <thead>
                <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>ShoppingList</th>
                </tr>
            </thead>
        </table>
    );
}}

Answer 1

第一个选项是使用react来渲染你的表，如果你的代码像你的例子一样简单，那么它是最好的解决方案。从长远来看，这通常是最好的解决方案，比尝试混合jquery内部的反应框架等更容易维护。

如果它不是一个选项，那么我建议为每个需要包含的反应组件创建一个根反应元素，并创建单独的反应上下文。

这样你的数据会变成这样：

data.push([
   'firstname',
   'lastname',
   '<div class='component-ShoppingList' data-name='.firstname.'/>'
])

然后你需要检测jquery的数据表重绘时间并相应地创建反应上下文：

const rootElements = document.querySelectorAll('.component-ShoppingList')
rootElements.forEach((element) => {
    const name = element.dataset.name
    ReactDOM.render(
        <ShoppingList name={name} />,
        element
    );
}

当然，这个代码需要适应于在适当的情况下创建/重新创建反应元素，但是你应该得到全局的想法。

我想知道是否可以将React组件推送到JavaScript数据表中？

1 个答案: