渲染 ES6 组件在代码笔中不起作用

Question

class Puppies extends React.Component {
  constructor(props) {
    super(props);
  };

  render() {
    return (
    <div>
        <DIV />
        <JSX />
        <aClassDiv />
    </div>
    );
  };

};
ReactDOM.render(<Puppies/>, document.getElementById("body-text"));

以上不是渲染图，但也没有报错。 codepen

Answer 1

这样称呼他们。

    const DIV =(
        <div>
            <h2>I'm a Sub-heading :|</h2>
            <p>text is what I am...</p>
        </div>
    );
    
    const JSX = (
      <div>
        <h2>There is more!</h2>
        <p>Words go here...</p>
      </div>
    );
    
    const aClassDiv = (
      <div className ="myDiv">
        <h1>Im in a class!</h1>
        <p>you dont know my class...</p>
      </div>
    );
    
    class Puppies extends React.Component {
      constructor(props) {
        super(props);
      };
    
      render() {
        return (
        <div>
            {DIV}
           {aClassDiv}
            {JSX}
        </div>
        );
      };
    
    };
    ReactDOM.render(<Puppies/>, document.getElementById("body-text"))

;

Answer 2

问题是，您的组件没有 return 任何东西。

const DIV =(
    <div>
        <h2>I'm a Sub-heading :|</h2>
        <p>text is what I am...</p>
    </div>
);

const JSX = (
  <div>
    <h2>There is more!</h2>
    <p>Words go here...</p>
  </div>
);

const aClassDiv = (
  <div className ="myDiv">
    <h1>Im in a class!</h1>
    <p>you dont know my class...</p>
  </div>
);

这是你的代码，应该是这样的：

   const DIV = () => {
  return (
      <div>
        <h2>I'm a Sub-heading :|</h2>
        <p>text is what I am...</p>
    </div>
  )
}
  


const JSX = () => {
  return  (
     <div>
      <h2>There is more!</h2>
      <p>Words go here...</p>
     </div>
  )
}
 


const aClassDiv = () => {
 return (
    <div className ="myDiv">
    <h1>Im in a class!</h1>
    <p>you dont know my class...</p>
  </div>
 )
}

渲染 ES6 组件在代码笔中不起作用

Render ES6 component is not working in codepen

javascript

jsx

reactjs

es6-class