Reactjs：追加而不是用render方法替换

Question

我是ReactJs的新手，我脑子里有很多问题，例如我想追加而不是用render方法替换，

我可以安全，简单地这样做吗？

创建临时div：

graphicsCard = 50
amdCpu = 80
itelCpu = 99
ram = 140
guitar = 199
case = 99
balance = 21
if (input('Has the graphics card been sold yet?').lower == "yes"):
    balance += graphicsCard
if (input('Has the AMD cpu been sold yet?').lower == "yes"):
    balance += amdCpu
if (input('Has the intel CPU been sold yet?').lower == "yes"):
    balance += intelCpu
if (input('Has the RAM been sold yet?').lower == "yes"):
    balance += ram
if (input('Has the Guitar been sold yet?').lower == "yes"):
    balance += guitar
if (input('Has the Case been sold yet?').lower == "yes"):
    balance += case

然后appendChild：

var temp = document.createElement('div');
ReactDOM.render(<NewElement />, temp);

这是一种干净的方式吗？

Answer 1

我认为你不应该在变异之外改变DOM。 而不是操纵DOM，操纵state将触发组件的新渲染。

JSX的简单示例，用ES6编写：

const MyHiddenComponent = (props) => (
  <div>
    Hello {props.name}
  </div>
)

class App extends React.Component {
 state = { toggle: false };
 
 handleToggle = () => this.setState({ toggle: !this.state.toggle });
 
 render() {
  return (
    <div>
      <button
        onClick={this.handleToggle}>{this.state.toggle ? 'hide' : 'show'}</button>
        {/* Show "Mark" only when state.toggle is true */}
        {this.state.toggle && (
          <MyHiddenComponent name="Mark" />
        )}
        {/* tenary operator */}
        {/* Show "Tom" only when state.toggle is false */}
        {/* Instead of null you can place any JSX */}
        {!this.state.toggle ? (
          <MyHiddenComponent name="Tom" />
        ) : null}
    </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>

编辑：

我看了你的评论。要添加新标签，我们可以在state内存储新添加的标签。要显示我们的标签，我们使用map迭代标签数组。

示例：

class AddNewTab extends React.Component {

   handleSubmit = (e) => {
     e.preventDefault();
          
     // get value
     const inputValue = this.refs.name.value;
     
     // we can also interrupt here if no value
     if (!inputValue) { return false }
     
     console.log('inputValue', inputValue);
     
     this.props.onAdd({
       name: inputValue
     })
     
     // reset input when we are done
     this.refs.name.value = '';
     
   }
   render() {
     return (
       <form 
         onSubmit={this.handleSubmit} 
         style={{ marginBottom: '20px' }}>
          <h1>Add new tab</h1>
          <input
            ref="name"
            type="text" 
            name="dupa" 
            placeholder="type new name" 
          />
          <button type="submit">Add new tab</button>
       </form>
     )
   }
}
const Tabs = (props) => {
 return (
   <div>
     {props.tabs.map((tab, i) => (
        <div key={tab.name + i}>{i + 1} {tab.name}</div>
     ))}
   </div>
 )
}


class App extends React.Component {
     state = { tabs: [
        { name: 'Details'},
        { name: 'Route'}
     ]};
     
     // setState triggers re-render
     handleAddNewTab = (newTab) => {
      // don't add anything if newTab.name is empty
      if (!newTab.name) { return false }
      
      this.setState({ tabs: [...this.state.tabs, newTab] });
     }
  
     
     render() {
      return (
        <div>
           <AddNewTab onAdd={this.handleAddNewTab} />
           {
             this.state.tabs.length ? (
                <Tabs tabs={this.state.tabs} />
             ) : (
               <div>No tabs</div>
             )
           }
        </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>

Answer 2

Here's一个代码框，展示了如何以“反应方式”接近它。