在reactjs中循环映射状态内的数组

Question

这是我的反应jsx中的地图代码

{this.state.nodes.map((node, index) => {
  return (
    <div
      key={index}
      className={"node " + node.className}
      id={node.id}
      ref={nodes => (this.refs.nodes[index] = nodes)}
      style={node.style}
      onClick={this.activeElem}
    >
      {node.text.text + "\n"}
      {showbutton ? (
        <div
          className="add-btn"
          onClick={event => this.editProcess(event, node, index)}
        >
          +
        </div>
      ) : (
        <p />
      )}

      {decisionbutton ? (
        <div
          className="add-btn"
          onClick={event => this.editProcess(event, node, index)}
        >
          +
        </div>
      ) : (
        <p />
      )}
      <div
        className="delete-btn"
        onClick={event => this.deleteNode(event, node)}
      >
        X
      </div>
    </div>
  );
})}

{node.text}正在显示一个Object Object，但是我无法在里面显示文本

节点>文本>文本

我怎么能显示这个？

Answer 1

以下是供您参考的代码段。我已经将节点数组作为我的假设。请使用您自己的状态节点数组并按照代码中的相关更改进行操作。

    const nodes = [{
          id: 1,
          style: 'dummy data',
          className: 'dummy data',
          text: [
            { id: 1, text: 'text 1'},
            { id: 2, text: 'text 2'}
          ]
        }]

    {nodes.map((node, index) => {
              return (
                <div
                  key={index}
                  className={"node " + node.className}
                  id={node.id}
                  ref={nodes => (this.refs.nodes[index] = nodes)}
                  style={node.style}
                  onClick={this.activeElem}
                >
                {(node.text|| []).map((child, key) => {
                  return (<div key={key}>
                    {child.text}
                    {showbutton && <div className="add-btn" onClick={event => this.editProcess(event, node, index)}>+</div>}
                    {decisionbutton && <div className="add-btn" onClick={event => this.editProcess(event, node, index)}>+</div>}
                    <div className="delete-btn" onClick={event => this.deleteNode(event, node)}>X</div>
                  </div>)
                })}
                </div>
              );
            })}