React：如何從外部設置組件的渲染內容？

Question

我想做這樣的事情（類似於React Bootstrap中的Accordion）：

class Foo extends React.Component{
   static Button;
   static Content;

   render(){
      return(
         <div>
            <Foo.Button/>
            <Foo.Content/>
         </div>
      );
   }
}

這樣我就可以像這樣使用它：

function App() {
  return (
     <Foo>
        <Foo.Button>
           <p>this is in the button</p>
        </Foo.Button>
        <Foo.Content>
           <p>this is content</p>
        </Foo.Content>
     </Foo>
  );
}

如何獲得此信息，或者必須搜索什么示例？

Answer 1

您應該通過props傳遞想要的內容。 例如，

 return (
     <Foo>
        <Foo.Button>
           <p>{this.props.buttonText}</p>
        </Foo.Button>
        <Foo.Content>
           <p>{this.props.content}</p>
        </Foo.Content>
     </Foo>
  );

Answer 2

您可以執行以下操作：

class Foo extends React.Component {
  static Button;
  static Content;

  render() {
    return (
      <div>
        <Foo.Button />
        <Foo.Content />
      </div>
    );
  }
}

Foo.Button = props => {
  const { children, ...rest } = props;

  <button {...rest}>{children}</button>;
};

Foo.Content = props => {
  const { children, ...rest } = props;

  <div {...rest}>{children}</div>;
};

export default Foo;