Question

这是我在react 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}显示的是一个对象对象，但我无法显示其中的文本

节点>文本>文本

我怎么显示这个？

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>
              );
            })}

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

1 个答案: