javascript - react : How can I set my components' render content from outside?

Question

我想做这样的事情(类似于 react 引导中的 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>
  );