Question

我在codepen中创建了一个简单的React应用程序：https://codepen.io/ch3rn0v/pen/owBKqm?editors=1011。

例如，这是JS部分：

var EmailInput = React.createClass({
    render: function() {
        return (
            <div class="input-field">
                <input id="email" type="email" class="validate" />
                <label for="email" data-error="Please enter a valid email" data-success="That's a valid email">Email</label>
            </div>
        );
    }
});

ReactDOM.render(<EmailInput />, document.getElementById('test'));

当我添加材料ui js lib和相应的css样式时，它们正确地应用于静态html元素但是当我动态创建一些html元素时，材料ui js lib不适用于那些动态添加的元素如何让lib手动查找新创建的元素？

Answer 1

使用JSX语法时，您必须使用className代替class和htmlFor而不是for，因为这是javascript中的保留关键字（更多信息here ）。

像这样：

var EmailInput = React.createClass({
    render: function() {
        return (
            <div className="input-field">
                <input id="email" type="email" className="validate" />
                <label htmlFor="email" data-error="Please enter a valid email" data-success="That's a valid email">Email</label>
            </div>
        );
    }
});

ReactDOM.render(<EmailInput />, document.getElementById('test'));

如何在React中动态添加外部javascript库到创建/更新的元素

1 个答案: