我們如何在Reactjs中動態地刪除元素

我正在動態地創建大量元素。我有一個狀態數組，保持記錄的元素。當我添加更多的元素時，他們與之前的數組元素連接。這是代碼。我們如何在Reactjs中動態地刪除元素

var App = React.createClass({ 
    getInitialState: function() { 
    return { 
     propsList: [] 
     }; 
    }, 
    addProps: function(props) { 
    var propsList = this.state.propsList.concat([props]); 
     this.setState({ propsList: propsList }); 
     }, 
    render: function() { 
    var components = this.state.propsList.map(function(props) { 
     return React.createElement('g', props); 
     }); 
    return React.createElement('div', null, components); 
     } 
    }); 
    ReactDOM.render(
     React.createElement(App, null), 
     document.getElementById('svg') 
    );

我想刪除執行單擊操作的元素（g標記）。我試圖使用refs，但它沒有工作，因爲數組存儲太多元素。

來源

2015-12-02 Awais

檢查這一點，如果這可能有助於http://jsfiddle.net/fooey/t37Lk6p4/ – choz

這個分量i可以調用addProps以外（）來傳遞的道具的陣列。 – Awais

請注意，如果「用戶操作」發生在您的React組件之外（即應用程序中的其他位置），您應該這樣做。如果「用戶操作」作爲React組件中的事件發生，那麼您只會調用一次渲染，而應用程序會將這些節點保存爲狀態，並只調用this.setState（{node：modifiedNodes}）;改變狀態，這會導致React更新你的DOM。

var App = React.createClass({ 
    render: function() { 
    // Get the node from the passed-in props 
    var node = this.props.node; 

    // generate the child components 
    var components = node.map(function(props) { 
     return React.createElement('g', { 
      id: props.id, 
      key: props.id 
     }, 
     React.createElement('path', props)); 
    }); 

    // render them in a div 
    return React.createElement('div', null, components); 
    } 
}); 


// first time it will create the DOM 
// after that it just modifies the DOM 
function renderApp(node, element) { 
    ReactDOM.render(React.createElement(App, { 
    node: node 
    }), element); 
} 

// Call when you want to get rid of the App completely 
// and cleanup memory without reloading the page 
function destroyApp(element) { 
    ReactDOM.unmountComponentAtNode(element); 
} 

// Initial render 
var node = Interfaces.Embroidery.node; 
renderApp(node, document.getElementById('parentDrawingNode')); 

function updateNodeOnSomeUserActionThatHappensOutsideOfReact(...) { 
    node.push(...); // or whatever modification you want 

    // re-render 
    renderApp(node, document.getElementById('parentDrawingNode')); 
}

來源

2015-12-02 10:15:36

謝謝你指出我在正確的方向！ – cabaji99

我這樣做是基於穆罕默德的答案。這是我的代碼。

var Counter = React.createClass({ 
    incrementCount(){ 
    this.setState({ 
     count: this.state.count + 1, 
     count2:this.state.count2 -1 

    }); 
    this.classCss = "asdfadsf"; 
    }, 
    getInitialState(){ 
    return { 
     count: 0, 
     count2:8999 
    } 
    }, 

tick(classNameReact) { 
    //<HelloWorld date={new Date()} /> 
    ReactDOM.render(
    React.createElement(classNameReact,{date:new Date()}), 
    document.getElementById('mount-point2') 
); 
}, 




    render: function(){ 
    this.classCss ="lala"; 
    return (
     <div className={this.classCss}> 
     <h1>Count: {this.state.count}</h1> 
     <h1>Count2: {this.state.count2}</h1> 
     <button type="button" onClick={this.incrementCount}>Increment</button> 
     <button type="button" onClick={()=>this.tick(HelloWorld)}>TICK</button> 
     <button type="button" onClick={()=>this.tick(Counter)}>TICK</button> 
     <div id="mount-point2"></div> 
     </div> 


    ); 
    } 
}); 


class HelloWorld extends React.Component { 
    render() { 
    return (
     <p> 
     Hello, <input type="text" placeholder="Your name here" />! 
     It is {this.props.date.toTimeString()} 
     </p> 
    ); 
    } 
}

來源

2016-10-11 19:39:55 cabaji99

我們如何在Reactjs中動態地刪除元素

回答

相關問題