Question

在标准的React JS应用中，如何从componentDidMount方法内部创建对象？这些对象可以是我所在组件的子组件，我想将它们附加到我的现有组件中，该组件已经渲染了ID为core-categories（请参见下文）

您会注意到我的最终目标是能够以编程方式加载数组（请考虑超出此SO问题的范围，因为我现在只是对其进行硬编码），使其长度可变，然后使用您在上面看到的数学方法，画出围绕圆的每个项目的X和Y。

为此，我正在尝试使用CSS转换（超出此范围）

class XYZClass extends Component {
  constructor() {
    super();
    this.state = {
      transformed: false
    }
    this.nodes = [];
  }

  createNodes (nodes_array, radius) {
    var numNodes = nodes_array.length;

    var nodes = [],
      width = (radius * 2) + 50,
      height = (radius * 2) + 50,
      angle,
      x,
      y,
      i;
    for (i=0; i<numNodes; i++) {
      angle = (i / (numNodes/2)) * Math.PI; // Calculate the angle at which the element will be placed.
      x = (radius * Math.cos(angle)) + (width/2); // Calculate the x position of the element.
      y = (radius * Math.sin(angle)) + (width/2); // Calculate the y position of the element.
      this.nodes.push({'id': i, 'name': nodes_array[i], 'x': x, 'y': y});
    }
    return this.nodes;
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({transformed: 'true'});
    }, 0);

    this.createNodes(['Apple','Bananna','Cherry','Date','Elderberry'], 250);

    // create new node component for each of these 5 nodes
    // append into the #core-categories div below programatically based on
    // x and y values calcualted above
    // ???????????????????????????????????????????????????
  }

  render() {
    const { transformed } = this.state;
    return (
      <div>
        <div id={'core-categories'} width={'500px'} height={'500px'}>


        </div>


      </div>

    )
  }
}
export default XYZClass;

Answer 1

子组件是在render()期间创建的。在componentDidMount()中，应调用setState()保存这些组件的数据。然后，在render()中，您可以通过例如在数组上调用map()从数据创建组件。例如：

componentDidMount() {
    setTimeout(() => {
      this.setState({transformed: 'true'});
    }, 0);

    let nodes = this.createNodes(['Apple','Bananna','Cherry','Date','Elderberry'], 250);
    this.setState({nodes});
  }

render() {
    const { transformed, nodes } = this.state;
    return (
      <div>
        <div id={'core-categories'} width={'500px'} height={'500px'}>
            {nodes.map((nodeProps) => <Node {...nodeProps}>)}
        </div>
      </div>
    )
  }

注意：我认为您不需要setTimeout()。您可以直接致电this.setState()。我还是把它留了下来，因为它对这个问题并不重要。

React JS —如何添加子组件并设置计算的转换？

1 个答案: