有什么办法可以添加动态li元素融入我的ul列表 ？
我想添加我的li单击按钮。这是示例代码
class Component1 extends React.Component {
constructor() {
super();
}
add() {
let ul = document.getElementById('mylist');
let li = document.createElement('li');
li.appendChild(document.createTextNode({some_variables});
ul.appendChild(li);
}
render() {
return (
<a href="#" onClick={() => this.add()}>Add</a>
<ul id="mylist">
/* dynamic list ITEM */
</ul>
);
}
}
ReactDOM.render(<Component1 />, document.getElementById('root'));
当然当前功能add()不适用于 React
当使用 React 时，我们不会像通常使用其他库（如 jQuery）那样“接触”DOM。
React 最好的核心功能之一是虚拟 DOM，协调和比较算法 https://reactjs.org/docs/reconciliation.html
React 构建并维护渲染的内部表示
用户界面。它包括您从组件返回的 React 元素。
这种表示方式让 React 避免创建 DOM 节点并访问
现有的超出必要，因为这可能比运营慢
在 JavaScript 对象上。有时它被称为“虚拟 DOM”
在反应中，您创建渲染/返回的组件（函数）jsx（标记）。
您的场景的一个简单示例可能是：
const ListItem = ({ value, onClick }) => (
<li onClick={onClick}>{value}</li>
);
const List = ({ items, onItemClick }) => (
<ul>
{
items.map((item, i) => <ListItem key={i} value={item} onClick={onItemClick} />)
}
</ul>
);
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
inputValue: '',
fruites: ['Apple', 'Banana', 'Orange']
};
}
onClick = () => {
const { inputValue, fruites } = this.state;
if (inputValue) {
const nextState = [...fruites, inputValue];
this.setState({ fruites: nextState, inputValue: '' });
}
}
onChange = (e) => this.setState({ inputValue: e.target.value });
handleItemClick = (e) => {console.log(e.target.innerHTML)}
render() {
const { fruites, inputValue } = this.state;
return (
<div>
<input type="text" value={inputValue} onChange={this.onChange} />
<button onClick={this.onClick}>Add</button>
<List items={fruites} onItemClick={this.handleItemClick} />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
