Question

我是全新的React。我已经完成了教程，但一如既往地阅读和做是两个单独的事情。所以从头开始创建一个全新的应用程序，并在第一个障碍下降。

我有一个名为AnswerBox的组件和一个名为GetAnswerButton的组件，但GetAnswerButton中的html没有被渲染，因此我假设它没有被传递给AnswerBox组件。仅呈现AnswerBox html。所以，问题，任何人都可以指出我的方式的错误

 import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';


    class AnswerBox extends React.Component{

        render(){
            return(
                <GetAnswerButton />,
                <div className="answerBox"></div>
             )
        }
    }

    class GetAnswerButton extends React.Component {

        render() {
            return (
                <div>
                    <button>Click Me</button>
                </div>
            )
        }
    }

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

下载它的代码笔（或不工作!!） Codepen

Answer 1

尝试更新AnswerBox类中的代码，如下所示：

class AnswerBox extends React.Component{
  render(){
    return(
      <div>
        <GetAnswerButton />,
        <div className="answerBox"></div>
      </div>
    )
  }
}

你应该在控制台中出错，说相邻的元素需要包装成一个封闭的元素。或类似的。

Answer 2

class AnswerBox extends React.Component {

  render() {
    return (
     <div>
       <GetAnswerButton />
       <div className="answerBox"></div>
     <div>
    )
  }
}

使用div或Fragment将回复包装在AnswerBox中，并且它有效。或者把它放在[]里面因为你作为数组返回。

React传递组件

2 个答案: