在子组件中创建数组

正确，从 React 的角度来看，这样做如下：将数组作为状态存储在父对象中，在父对象中创建一个修改状态的函数，将该函数作为参数传递给第一个子对象，然后数组的值到第二个。

代码笔

<div id="root">You have no JS enabled</div>

class FirstChild extends React.Component{
  render(){
    var {needArr} = this.props;
    var outList = needArr.map( (comp,key) => {
      return <li key={key}> {comp} </li>
    });
    return (<ul> {outList} </ul>)

  }
}

class SecondChild extends React.Component {

  render (){
    return [(<button onClick={() => {this.props.actions.buttonClick("aaa")}}>add me</button>),
            (<button onClick={() => this.props.actions.actionDva()}>RemoveFirst</button>),
           (<button onClick={() => this.props.actions.actionTri()}>RemoveLast</button>),
           (<button onClick={() => this.props.actions.actionFour("bbb")}>AddFirst</button>)
           ];
        };
}


class MainComp extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      myArr:["A", "B", "C", "D"]
    }
  }

  modifyArray = (newComp) => {
    var {myArr} = this.state;
    myArr.push(newComp);
    this.setState({myArr});
  }

  removeFirst = () => {
    var {myArr} = this.state;
    myArr.shift();
    this.setState({myArr});
  }

  removeLast = () => {
    var {myArr} = this.state;
    myArr.pop();
    this.setState({myArr});
  }

  addFirst = (val) => {
    var {myArr} = this.state;
    myArr.unshift(val);
    this.setState({myArr});
  }

  render(){
    var {myArr} = this.state;
    return (<div>
        <FirstChild needArr={myArr}/>
        <SecondChild actions={{
            buttonClick:this.modifyArray,
            actionDva:this.removeFirst,
            actionTri:this.removeLast,
            actionFour:this.addFirst
          }}/>
        </div>)
  }
}


ReactDOM.render(
          <MainComp/>,
          document.getElementById('root')
        );