Question

我知道这个已经在Stack Overflow上反复发布了。但我无法弄清楚如何在我的代码中解决这个问题。

基本上，我在ReactJS中构建一个简单的捐赠Web应用程序。在这一点上非常基本。

1）这是一个简短的表格，您输入一个数字（Form.JS）。然后将此值解析为ProgressBar.js。

2）然后我计算总捐款并将此总额/总计/总和插入页面。

现在我要做的是为我的酒吧添加一些造型。例如，如果捐赠的总数是＆lt; 10，添加div，颜色为红色，宽度：10px。

但我一直得到错误appendChild属性为null。我想这可能是因为我的代码在总和计算之前运行了？我只是不确定如何解决这个问题。

以下是我的代码段：

FORM.JS

import React from 'react';
import 'bulma';

const Form = ({ handleSubmit, handleChange}) => {

return (
  <form onSubmit={handleSubmit}>
    <div className="field">
      <label htmlFor="name">Name</label>
      <input className="input"
        type="number"
        placeholder="number"
        name="number"
        onChange={handleChange}
        required
      />
    </div>
    <button className="button is-primary">Give Now</button>
  </form>
  );
};
export default Form;

PROGRESSBAR.JS

import React from 'react';
import 'bulma';

const ProgressBar = ({donated}) => {

  const numbers = donated.map(Number);

  // FUNCTION TO CALCULATE TOTAL DONATIONS
  function add(a, b) {
    return a + b;
  }
  const sum = numbers.reduce(add, 0);

  // IF SUM DONATIONS ARE LESS THAN THE VALUE OF 10, ADD THIS CSS TO THE JSX
  if (sum < 10) {
    const div = document.createElement('div');
    div.style.background = 'red';
    div.style.width = '10px';
    div.style.height = '50px';
    div.style.float = 'left';
    document.querySelector('.bar').appendChild(div);
 }
// JSX
  return (
    <div>
      <p>donations made so far: {donated.length}</p>
      <p>£{sum}</p>
      <div className="bar"></div>
      <ul>
       {donated.map((donated, i) => <li key={i}>{donated}</li>)}
     </ul>
  </div>
 );
};
export default ProgressBar;

APP.JS

class App extends React.Component {

 constructor() {
  super();

  this.state = {
   number: '',
   donated: []
 };

 this.handleChange = this.handleChange.bind(this);
 this.handleSubmit = this.handleSubmit.bind(this);
 // we need to bind otherwise this is undefined
}

//HANDLE FUNCTIONS
handleChange(e) {
this.setState({ number: e.target.value }, () => 
console.log(this.state.number));
 }

handleSubmit(e) {
e.preventDefault();
this.setState({donated: this.state.donated.concat(this.state.number)});
}

render() {
return (
  <main>
    <section className="section">
      <h1 className="is-size-2">DONATE FOR A GOOD CAUSE</h1>
      <ProgressBar donated={this.state.donated} />
      <Form handleChange={this.handleChange} handleSubmit={this.handleSubmit} />
    </section>
  </main>
 );
 }
}
ReactDOM.render(
<App />,
document.getElementById('root')

）;

Answer 1

您的代码在创建节点之前正在运行，因此无法对其进行操作。但是你通常不需要在React中像这样进行DOM操作。只需将逻辑放在JSX中，例如：

<div className="bar">
    {sum < 10 && (
        <div style={{background: 'red'}} />
    )}
</div>

ReactJs - 无法读取属性＆quot; appendChild＆＃39;为null

1 个答案: